React 之 Redux

应用场景

1. 随着 JavaScript 单页应用开发日趋复杂,管理不断变化的 state 非常困难

2. Redux的出现就是为了解决state里的数据问题

3. 在React中，数据在组件中是单向流动的

4. 数据从一个方向父组件流向子组件(通过props)，由于这个特征，两个非父子关系的组件（或者称作兄弟组件）之间的通信就比较麻烦

设计思想：

• - Redux是将整个应用状态储存到一个地方，成为stroe

• - 里面保存一个状态树 state tree

• - 组件可以派发dispatch行为action给store，而不是直接通知其他组件

• - 其他组件可以通过订阅store中的状态（state）来刷新自己的视图

三大原则：

1. - 整个应用的 state 被存储在一颗 object tree 中，并且这个 object tree 只存在于唯一一个store中

2. - State 只是只读的，唯一改变  state 的方法就是出发action，action是一个用于描述已发生事件的普通对象，使用纯函数来进行修改，为了描述action如何改变 state tree，你需要鞋reducers

3. - 单一数据源的设计让 React组件之间的通信更加方便，同时也便于状态的统一管理

Redux 概念解析

    

1Store

store就是数据保存的地方，你可以把它看成是一个容器。整个应用中只能有一个store，Redux提供 createStore 这个函数，用来生成 Store

• 上述代码中。createStore函数接受另一个函数作为参数，返回新生成的Store对象

2State

Store包含所有的数据，如果想得到某个时点的数据，就要对Store生成快照，这种时间点的数据集合就叫做 State，当前时刻的 State 可以通过 store.getState()

• Redux 规定，一个State对应一个View。只要 State 相同， View就相同。你知道 State 什么样，就知道View是什么样，反之亦然。

3Action

State 改变会导致 View 的变化，但是，用户接触不到 State，只能接触到 View，所以，View的的变化必定是 State 导致的。 Action 就是 View 发出的通知，表示State要发生变化了。Action 是一个对象。其中 type 属性是必须的，表示 Action 名称，其他 属性可以自由设置，社区有个规范可以参考

4Action Creator

View 要发出多少消息，就会有多少种Action。如果手写，就会很麻烦。可以定义一个函数来生成 Action，这个 函数叫做 Action Creator

• 上面代码中，addTodo函数就是一个 Action Creator

5store.dispatch()

store.dispatch()，是 View 发出的唯一方法。

• 上面代码中，store.dispatch()接受一个Action对象作为参数，将它发送出去。结合 Action Cretaor，这段代码可以改成下面这样

6Reducer

Store 收到 Action 之后，必须给出一个新的State，这样View才会发生变化。

这种 State 计算过程叫做 Reducer

Reducer 是一个纯函数，它接受当前 State 和 Action 作为参数，返回一个新的 State

7combineReducers(reducers)

combineReducers 辅助函数的作用是。把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 createStore。

多个子 reducer 函数合并后，相当于整体函数会为 state 特定字段进行映射产生特定的reducer函数。如中的例子

，todos和counter只会处理对应字段过来的action。

8applyMiddleware(...middlewares)

输入一个middlewares数组，返回一个函数，函数以createStore为参数：

使用示例：

每个 middleware 接受 的 和 函数作为命名参数，并返回一个函数。该函数会被传入 被称为 next 的下一个 middleware 的 dispatch 方法，并返回一个接收 action 的新函数，这个函数可以直接调用next(action)，或者在其他需要的时刻调用，甚至根本不去调用它。调用链中最后一个 middleware 会接受真实的 store 的 方法作为 next 参数，并借此结束调用链。所以，middleware 的函数签名是 ({ getState, dispatch }) => next => action。

9<Provider store>和connect([mapStateToProps], [mapDispatchToProps],[mergeProps], [options])

<Provider store>使组件层级中的 connect()方法都能够获得 Redux store。正常情况下，你的根组件应该嵌套在 <Provider>中才能使用 connect()方法。

connect： 连接 React 组件与 Redux store。

?

人要怀揣着想象力活下去。—— 安藤忠雄