Redux

什么是 Redux？

官方解释：redux 是 js 应用的可预测状态的容器。可以理解为全局数据状态管理工具（状态管理机），用来做组件通信等。

## 为什么使用 Redux？

下面的图是不使用 Redux 和使用 Redux 时父子组件之间的通信方式

可以看到，没用使用 Redux 的情况，如果两个互不相干的组件之间的需要通信的话，可能需要多个中间组件为他们进行消息传递，这样浪费资源，代码也会变得复杂。

Redux 中以单一数据源 Store 来存储状态数据，所有的状态都是可预测的（也就是说，所有的状态都是我们自己定义的）

设计思想

web 应用是一个状态机，视图与状态是一一对应的。
所有的状态，保存在一个对象里面。

概念

state

redux 把每一个状态state（数据）都看作一个对象，这里的计数器，我们作为初始值，例如计数器的状态：

const initHomeState = { num: 0 };

这个对象就像一个“模型”，除了没有 setter。这样代码的不同部分不能任意改变状态，导致难以重现的错误。

action

redux 将每一个更改动作描述为一个action，要更改state中的内容，你需要发送action。一个action是一个简单的对象，用来描述state发生了什么变更，例如计数器的action分为递增和递减，代码如下：

// 递增
const incrementAction = { type: COUNTER_INCREMENT };
// 递减
const decrementAction = { type: COUNTER_DECREMENT };

如果状态发生了变化，我们就知道它为什么会改变。

reducer

我们需要将state和action联系起来，为此我们写了一个叫reducer的函数。reducer将state和action作为参数，并返回应用的一个新的state，例如计数器的reducer：

const counter = (
  state: { num: number } = initHomeState,
  action: { type: string }
) => {
  switch (action.type) {
    case COUNTER_INCREMENT:
      return Object.assign({}, state, { num: ++state.num });
    case COUNTER_DECREMENT:
      return Object.assign({}, state, { num: --state.num });
    default:
      return state;
  }
};

接下来,我们需要写一个rootReducer来管理应用的完整状态,需要使用combineReducers来结合reducer

import { combineReducers } from "redux";

const rootReducer = combineReducers({
  counter
});

store

store就是 redux 保存状态state（数据）的地方,可以看作一个容器,整个应用中只能有一个store,创建 store 需要传递reducer,通常会传递rootReducer

import { createStore } from "redux";
const store = createStore(rootReducer);

store.dispatch()

store.dispatch()是组件发出action的唯一方法。

dispatch发出的action会传递到reducer中去，通过reducer返回下一个state。

store.dispatch(incrementAction);
store.dispatch(decrementAction);

简单来说就是组件通过使用dispatch发送action到reducer来改变state从而改变组件的props,更新vdom，最后更新真实dom。

redux 和 react native 组件的连接

我们需要安装 redux,react-redux:

yarn add redux react-redux @types/react-redux @types/redux

react-redux 的 API

connect()

connect()用来将 react 组件连接到 redux 的store，就是使 react 组件可以接收到store中的数据。

connect()的参数

mapStateToProps?: Function
mapDispatchToProps?: Function | Object
mergeProps?: Function
options?: Object

mapStateToProps?: (state, ownProps?) => Object

这个方法是用来指定 react 组件将使用哪些store中的数据，也就是说，当store中的state更新后，这个方法会接收state（方法的第一个参数），将state中变更的值通过返回值传递给 react 组件的props。例如计数器的mapStateToProps：

const mapStateToProps = (state: any) => {
  return {
    num: state.counter.num
  };
};

mapDispatchToProps?: Object | (dispatch, ownProps?) => Object

这个方法的第一个参数就是store.dispatch,可以定义发送action的方法，并且将方法通过返回值传递给 react 组件的props。例如计数器的mapDispatchToProps：

const mapDispatchToProps = (dispatch: any) => ({
  increment: () => dispatch(incrementAction),
  decrement: () => dispatch(decrementAction)
});

mergeProps?: (stateProps, dispatchProps, ownProps) => Object

这个方法用来生成 react 组件最终的props。一般情况下很少使用。

options?: Object

同样很少使用，可以点这里来查看官方文档

使用

然后需要为计数器按钮组件Counter建立连接

let Counter = ({ increment, decrement, num }) => (
  <View style={{ flex: 1 }}>
    <View style={{ flex: 1, textAlign: "center", paddingTop: "50%" }}>
      <Text style={{ fontSize: 30, textAlign: "center" }}>{num}</Text>
    </View>
    <View style={{ flex: 2 }}>
      <Button onPress={increment}>递增</Button>
      <Button onPress={decrement}>递减</Button>
    </View>
  </View>
);
const mapStateToProps = (state: any) => {
  return {
    num: state.counter.num
  };
};
const mapDispatchToProps = (dispatch: any) => ({
  increment: () => dispatch(incrementAction),
  decrement: () => dispatch(decrementAction)
});
Counter = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

在react native的根组件（通常是 App 组件，App.tsx）使用react-redux提供的Provider组件设置全局store：

import React, { Component } from "react";
import { Provider } from "react-redux";
import { connect } from "react-redux";

export default class App extends Component<Props> {
  render() {
    return (
      // 设置全局store
      <Provider store={store}>
        <Counter />
      </Provider>
    );
  }
}

接下来就可以点击递增按钮，来始store.counter.num进行递增了，递减也是可以的。

Previous搭建 React Native 项目 Next在父组件中给子组件创建ref

Last updated 2 years ago