Redux

  • Jul, 05 2019
  • React

Redux

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

我们需要将stateaction联系起来,为此我们写了一个叫reducer的函数。reducerstateaction作为参数,并返回应用的一个新的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发送actionreducer来改变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()的参数

  1. mapStateToProps?: Function
  2. mapDispatchToProps?: Function | Object
  3. mergeProps?: Function
  4. 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进行递增了,递减也是可以的。