乐趣区

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

jiezi

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。

完

退出移动版