React 之 Redux

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 概念解析

1 Store

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

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

2 State

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

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

3 Action

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

4 Action Creator

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

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

5 store.dispatch()

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

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

6 Reducer

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

这种 State 计算过程叫做 Reducer

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

7 combineReducers( reducer s)

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

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

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

8 applyMiddleware(...middlewares)

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

使用示例：

每个 middleware 接受  Store  的  dispatch  和  getState  函数作为命名参数，并返回一个函数。该函数会被传入 被称为 next 的下一个 middleware 的 dispatch 方法，并返回一个接收 action 的新函数，这个函数可以直接调用next(action)，或者在其他需要的时刻调用，甚至根本不去调用它。调用链中最后一个 middleware 会接受真实的 store 的  dispatch  方法作为 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。

:end:

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