react中dispatch_React中的Redux

学习必备要点：

首先弄明白，Redux在使用React开发应用时，起到什么作用——状态集中管理

弄清楚Redux是如何实现状态管理的——store、action、reducer三个概念

在React中集成Redux：redux + react-redux(多了一个概念——selector)

Redux调试工具：redux devtools

redux相关很好用的插件：redux-saga的相关介绍

redux结构图

react-redux.png

其中红色虚线部分为redux的内部集成，不能显示的看到。

action：是事件，它本质上是JavaScript的普通对象，它描述的是“发生了什么”。action由type：string和其他构成。

reducer是一个监听器，只有它可以改变状态。是一个纯函数，它不能修改state,所以必须是生成一个新的state。在default情况下，必须但会旧的state。

store是一个类似数据库的存储(或者可以叫做状态树)，需要设计自己的数据结构来在状态树中存储自己的数据。

Redux入门

Redux简介

Redux是一个状态集中管理库。

安装

npm install --save redux

附加包

npm install --save react-redux

npm install --save-dev redux-devtools

三大原则

单一数据源

整个应用的state被存储在一棵object tree中，并且这个object tree只存在于唯一一个store中。

State是只读的

惟一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

使用纯函数来执行修改

为了描述action如何改变状态树，我们需要编写reducers。Reducer只是一些纯函数，他接受先前的state和action，并返回新的state对象。

react-redux.png

上图是Redux如何实现状态管理的框架，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” 和 “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'}

处理 Reducer 关系时的注意事项

开发复杂的应用时，不可避免会有一些数据相互引用。建议你尽可能地把 state 范式化，不存在嵌套。把所有数据放到一个对象里，每个数据以 ID 为主键，不同实体或列表间通过 ID 相互引用数据。把应用的 state 想像成数据库。这种方法在 normalizr 文档里有详细阐述

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 fun