Redux 学习笔记
学习必备要点：
1.首先弄明白，Redux 在使用 React 开发应用时，起到什么作用 --- 状态集中管理
2.弄清楚 Redux 是如何实现状态管理的 --- store、action、reducer三个概念。
3.在React中集成Redux：redux + react-redux（多了一个概念——selector）
4.Redux调试工具：redux devtools
5.redux相关很好用的插件：redux-saga的相关介绍
三大原则
单一数据源
整个应用的state被存储在一棵object tree中，并且这个object tree只存在于唯一一个store中。
State是只读的
惟一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
使用纯函数来执行修改
为了描述action如何改变状态树，我们需要编写reducers。Reducer只是一些纯函数，他接受先前的state和action，并返回新的state对象。
View(视图) 可以通过store.dispatch()方法传递action。 Action相当于事件模型中的事件，它描述发生了什么。Reducer相当于事件模型中的监听器，它接收一个旧的状态和一个action，从而处理state的更新逻辑，返回一个新的状态，存储到Store中。而从store-->view 的部分，则是通过mapStateToProps 这个函数来从Store中读取状态，然后通过props属性的方式注入到展示组件中。图中红色虚线部分是Redux内部处理，我们不必过多考虑这部分的实现。
Action
Action 是把数据从应用传递到 store 的有效载荷，它是 store 数据的唯一来源，一般来说，我们通过 store.dispatch（）将action 传到 store。
Action 创建函数
就是生成 action 的方法。“action” 和 “action 创建函数” 这两个概念很容易混在一起，使用时最好注意区分。
Redux 中 action 创建函数只是简单的返回一个 action。
改变 userName 的示例：
export function changeUserName(userName){ // action 创建函数
return { // 返回一个 action
type:'CHANGE_USERNAME',
payload:userName,
};
}Action 本质上是JavaScript 普通对象。我们规定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下，type 会被定义成字符串常量。当应用规模越来越大时，建议使用单独的模块或文件来存放 action。
除了 type 字段外，action 对象的结构完全由你自己决定。参照 Flux 标准 Action 获取关于如何构造 action 的建议，另外还需要注意的是，我们应该尽量减少在action中传递数据。
Reducer
Action 只是描述有事情发生这一事实，而 Reducer 用来描述应用是如何更新 state。
设计 State 结构
在 Redux 应用中，所有的 state 都被保存在一个单一对象中。在写代码之前我们首先要想清楚这个对象的结构，要用最简单的形式把应用中的state用对象描述出来。
HelloApp应用的state结构很简单，只需要保存userName即可：
{userName: 'World'}Action 处理
确定了 state 对象的结构，就可以开始开发 reducer。reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。
(state, action) => newState
之所以称作 reducer 是因为它将被传递给 Array.prototype.reduce(reducer, ?initialValue) 方法。保持 reducer 纯净非常重要。永远不要在 reducer 里做以下操作：
- 修改传入参数；
- 执行有副作用的操作，如 API 请求和路由跳转；
- 调用非纯函数，如
Date.now()或Math.random()。
在后续的学习终将会介绍如何执行有副作用的操作，现在只需要谨记 reducer 一定要保持纯净。只要传入参数相同，返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用、没有 API 请求、没有变量修改，单纯执行计算
我们将写一个reducer，让它来处理之前定义过的action。我们可以首先指定state的初始状态。
const initState = { /** 指定初始状态 */
userName: 'World!'
}
export default function helloAppReducer(state=initState, action) {
switch(action.type) {
case 'CHANGE_USERNAME':
return {
userName: action.payload, // 改变状态
};
default:
return state; // 返回旧状态
}
}警告:
-
不要修改
state。如果涉及多个状态时，可以采用对象展开运算符的支持，来返回一个新的状态。 假设我们的实例中还存在其它状态，但是我们只需要改变userName的值，那么上述示例我们可以采用以下方式返回新的状态：return { ...state, userName: action.payload } -
在default情况下返回旧的
state。 遇到未知的action时，一定要返回旧的state。