redux使用

react

有很多文章介绍 redux 的使用方式，但对于我来说这是第一次来写，总结学习使用 redux ，希望你能从本文中受到启发。

Redux 为应用程序提供一个可预测的状态管理。所谓的状态管理就是对数据的管理，当对数据进行增删改操作时候，达到能够可以预测的目的。在 Redux 中能够清楚的知道什么发生了改变（action），改变之后的数据是什么样的（store/state），以及发生了哪些改变（redux-devtool 中的 action 记录）。

这样的开发方式再搭配 redux-devtool 工具，利用时间旅行调试器可以编辑后实时预览数据如何更改，也可以回溯到某一个时间点上查看状态的变化，是调试的利器。

在深入学习之前，先来看下 Redux 中的三大原则：

• 单一数据源
• 状态是只读的
• 使用纯函数来执行修改

分别来详细介绍如下。

三大原则

单一数据源

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

• 这些数据都只作为props传递给组件，明确了数据的来源。
• 将状态集中保存在一个对象中，这使得在阅读代码时推断应用程序数据或者持久化数据变得更容易。
• 所有数据都在一个位置时，应用程序更容易调试和测试

状态是只读的

状态是只读的，并不意味这是要保护对象不被改变，而是当更新数据时候，再生成一棵全新的状态数据树。

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

object tree 描述了整个应用的状态，action描述了改变单元数据这个动作的所有信息。

所有的修改都被集中化处理，且严格按照一个接一个的顺序执行。Action 就是普通对象而已，因此它们可以被日志打印、序列化、储存、后期调试或测试时回放出来。

使用纯函数来执行修改

派发相应的 action 来描述状态需要做出的改变，那么这个改变怎么被执行，进而产生了新的数据状态呢？

在派发相应的 action 后，会交给 reducer 处理，reducer 会根据动作的 type，将整个状态树进行拆分，以适应传入的 action 做相应的改变。在 reducer 中不会对原对象更改，每次都会返回一个新的对象。

使用redux

安装 redux

npm i redux -s

引入创建容器的方法 createStore

import { createStore } from 'redux';
// 创建容器
let store = createStore(reducer, [preloadedState], enhancer)