Redux

Redux是对状态的集中管理。所谓状态是指影响到UI变化的数据。如：切换主题背景色、鼠标悬停view边框加粗等。

一、Redux是什么

Redux是一个全局的、唯一的、不可改变的内存状态[数据库]。这里面的不可以改变指的是不会改变原有状态，只会产生新状态。

Redux主要分为三个角色：

  • Store

Store是获得状态的源头，也是用于将Action发射出去。

  • Action

Action可以理解为信号或者一个事件。Action包含type、payload

  • Reducer

Reducer是一个纯函数（处理跟界面相关的数据）、可以接收到 任何 Action，Reducer并不改变状态，只会产生新状态。
Reducer的函数形如下面示例： 

1
2
3
  reducer(state = initialState, action: {type: string, payload: any}) : State {
      ...
  }

当返回新状态时, 可以利用下面两种写法：
* ES6写法 

1
state = {...state, passwordRule: action.payload};

  • 非ES6写法

    Object.assign({}, state, {passwordRule: action.payload});

推荐安装插件： Redux DevTools

二、Redux数据流

  • component产生action（信号/事件）

  • actionc触发effect，业务处理数据

  • store中存储state、reducer

  • reducer产生新的state

  • state修改，更新component

针对图例中Effect、selector有下面的理解：

  • Effect

如果Action看成一个流的话，和UI相关的一个处理当成Reducer，那么UI状态之外的更改我们把它叫做Effect。
Effect本身也是一个流，是一个action的流。如：this.actions$.ofType() 可以进行action的筛选。一般和api交互的action（如：get、post、put等）在effect中执行。直接跟UI交互的action在reducer中执行。如：当从api端抓取数据返回的时候，成功的场合发送LOAD_SUCCESS。失败的场合发送LOAD_FAIL。在reducer中处理成功和失败的action，产生新的State，更新相关UI。

  • Selector

当在reducer中产生新的State后，可以从Store中获取到新的state对应payload数据。如：this.store.select(XXAction.playload.value), 也可以利用管道的方式取得相关数据。如：this.store.pipe(selection(XXXSelectors.getValus))。

reselect写法形如：

1
2
3
4
  const getValues = createSelector(
      getPasswordruleState,
      (state: PasswordruleState) => state.passwordRule.values
  );

reselect是带有 记忆 功能的函数运算，无论携带多少参数，最后一个才是用于函数计算，前面参数都作为它的输入。之所以说reselect带有记忆功能，是因为如果后一次的请求参数和前面一次请求相同，则从缓存中直接将数据返回。