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

    

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 接受 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。

🔚

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