对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. 数据变化的时候，可以通知组件。