React学习心得之Redux

在React的使用过程中，经常会碰到组件间传值和共享状态的问题。

这个时候为了方便管理和使用，我们会引进状态管理器，其中有一种就是redux。

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。Redux 和 React 之间没有关系。

Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。

Redux 无依赖。

Redux 可以用这三个基本原则来描述：

1、单一数据源。

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

2、State 是只读的。

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

3、使用纯函数来执行修改。

为了描述 action 如何改变 state tree ，你需要编写 reducers。

即Redux有三大概念，Action，Reducer和Store。

Action本质上是jacascript的普通对象，通过store.dispatch()方法来触发定义的action，这是唯一改变state的方法。

如：

Reducer 是什么呢，Reducer 是用来处理数据逻辑的，具体就是根据 Action 处理 State 的函数。

Action并没有指出如何处理数据，那么更新state就是reducer要做的事情了。

在编写reducer的过程中，有两个问题。

1、怎样设计 state 的数据结构？

2、有了 state 结构，怎么编写 reducer？

在 Redux 应用中，所有的 state 都被保存在一个单一对象中。

通常，这个 state 树还需要存放其它一些数据。我们应该尽可能将其分离开。

根据 State 结构编写 reducer时，redux 提供 combineReducers() 函数来调用我们编写的一系列 reducer。

每个 reducer 根据它们的 key 来筛选出 state 中的一部分数据并处理。

然后这个生成的函数所所有 reducer 的结果合并成一个大的对象。

如：

Store是什么？

action 用来描述“发生了什么”, reducers 会根据 action 更新 state。

Store 就是把它们联系到一起的对象，是用来维持应用的 state 的。

store有四个方法。

getState： 获取应用当前 state。

subscribe：添加监听器。

dispatch：分发 action。更新 state。

replaceReducer：替换 store 当前用来处理 state 的 reducer。

常用的是dispatch，这是修改State的唯一途径，使用起来也非常简单。

简单来说，Redux 应用只有一个单一的 store。

当需要拆分处理数据的逻辑时，使用 reducer 组合，而不是创建多个 store。

combineReducers是用来合并reducer的，因为creatstore只能有一个reducer，但是一个reducer又只对应一个状态。

单个reducer是一个纯函数，定义了初始状态和action，必须给初始状态赋值，必须有返回值。

来源：千锋HTML5