对redux和react-redux的理解和总结（一）

为什么使用redux

随着前端单页面开发越来越复杂，javascript需要管理越来越多的状态state。如果一个model的变化引起另一个model的变化，view的变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候，由于什么原因，如何变化已然不受控制。 当系统变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。Redux使得state在变化和异步中可预测。

在使用redux的应用中，所有的stae都以一个对象树的形式存储在单一的store中，惟一改变 state 的办法是触发 action，action 如何改变 state 树，需要编写 reducers。

Action 把数据从应用传到 store 。它是 store 数据的唯一来源。通过 store.dispatch() 将 action 传到 store。
Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。更新state的函数称为reducer，它是一个纯函数，接受旧的state和action，返回新的state。reducer必须是一个纯函数，不能进行如下操作：

• 修改传入的参数
• 执行有副作用的操作，如 API 请求和路由跳转
• 调用非纯函数，如 Date.now() 或 Math.random()

Redux提供了combineReducers函数，该函数接受一个对象，作用是生成一个函数，这个函数来调用你的一系列 reducer，每个 reducer 根据它们的 key 来筛选出 state 中的一部分数据并处理，然后这个生成的函数再将所有 reducer 的结果合并成一个大的对象。没有任何魔法。正如其他 reducers，如果 combineReducers() 中包含的所有 reducers 都没有更改 state，那么也就不会创建一个新的对象。

Store 是action和reader之间的桥梁，是把它们联系到一起的对象。Redux 应用只有一个单一的 store
Store有以下功能：

• 维持应用的state
• 提供 getState() 方法获取 state
• 提供 dispatch(action) 方法更新 state
• 通过 subscribe(listener) 注册监听器
• 通过 subscribe(listener) 返回的函数注销监听器

使用createStore创建一个Store

const Store = createStore(reducers,other)

Redux的数据流

Redux是单向数据流。单向数据流的好处：意味着应用中所有的数据都遵循相同的生命周期，这样可以让应用变得更加可预测且容易理解。同时也鼓励做数据范式化，这样可以避免使用多个且独立的无法相互引用的重复数据。

• 调用 store.dispatch(action)，触发action动作
• Redux store 调用传入的 reducer 函数，Store 会把两个参数传入 reducer： 当前的 state 树和 action。
• 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。
• Redux store 保存了根 reducer 返回的完整 state 树

Redux搭配react使用

使用react-redux。在react-redux的使用中，关注两个方法：Provider和connect

• Provider把store放到context里，所有的子元素可以直接取到store，本质上 Provider 就是给 connect 提供 store 用的。
• connect 是一个高阶组件，接受一个组件 WrappedComponent 作为参数，负责链接组件，把给到redux里的数据放到组件的属性里。主要有两个作用：1. 负责接受一个组件，把state里的一些数据放进去，返回一个组件；2. 数据变化的时候，能够通知组件。