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;    // 返回旧状态
    }
}

警告:

1. 不要修改state。如果涉及多个状态时，可以采用对象展开运算符的支持，来返回一个新的状态。 假设我们的实例中还存在其它状态，但是我们只需要改变userName的值，那么上述示例我们可以采用以下方式返回新的状态：

   return {
     ...state,
     userName: action.payload
   }
   

2. 在default情况下返回旧的state。 遇到未知的action时，一定要返回旧的state 。