关于react-native:React-Native填坑之旅使用reactredux-hooks

React hooks进去之后又关上了一道前端造轮子的大门。各种Hooks的工具满天飞。react-redux也跟上了这波潮流。

我的项目代码在这里

首先，也是最重要的一点。如果你不晓得要不要用redux，那么最好不要用。

redux次要解决的问题是对立起源的状态治理。

1. 全局state寄存在store里。store.getState()能够取得state树。
2. 给store，发送action能够通过reducer生成新的state。store.dispatch({type:SOME_ACTION, data: {})。
3. 订阅store，或者新的state。store.subscribe(() => store.getState())。

React-redux次要解决的是第二条。应用connect办法把state和actions都作为props注入到了组件里。

比方当初有一个Counter组件。increment做为action creator。状态就是value++。那么能够写成：

function Counter(props) {
  // ...
  return (<Button onClick={() => props.increment()}>+</Button>)
}

const mapStateToProps = (state) => ({
  value: state.value,
});
const mapActionToProps = (dispatch) => ({
  increment: dispatch(increment()),
})
connect(mapStateToProps, mapActionToProps)(Counter);

大略就是下面这样的。应用了react-redux的hooks呢，画风一转。整个显得清晰了很多。当然这里也不能少了redux toolkit的帮忙。

要实现redux利用的齐全体就少不了要创立redux的store等这些后期的配置工作。为了缩小这些繁琐的配置，redux开发了toolkit这一套工具。我的项目代码中都有，能够参考。这里不多介绍。

应用了react-redux之后看起来就是这样了。咱们在后期没有多做action（action creator）和reducer的介绍。忽然呈现不能体现它的简化后的益处。有一点，action和reducer通常都放在不同的中央。应用起来不是非常不便。

在新的实现中这些都在slice文件中，不便对立的治理。保护起来也好很多。

import { createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: state => {
      state.value += 1;
    },
    decrement: state => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

这是应用了redux toolkit的益处。action的局部根本不必解决。它会主动生成进去action creator。

react-redux的connect办法也省去了。代替的计划是useSelector和useDispatch两个办法。在ReduxCounter组件里：

// ...

const ReduxCounter: React.FC<ReduxCounterProps> = props => {
  // ...
  const count = useSelector((state: RootState) => { // 1
    return state.counter.value;
  });
  const dispatch = useDispatch();    // 2
  const onAdd = () => dispatch(increment()); //3

  return (
          <View>
            <Text>{count}</Text>
          </View>
        <View style={styles.buttonWrapper}>
          <TouchableHighlight style={styles.button} onPress={onAdd}>
            <View style={styles.buttonInsider}>
              <Text>+</Text>
            </View>
          </TouchableHighlight>
  );
};

export { ReduxCounter };

// 1. 应用useSelector获取state树对应到这个组件的状态
// 2. 应用useDispatch获取dispatch办法，能够发送action
// 3. 在解决add点击的时候调用dispatch办法发送increment() action creator生成的action。

完