Redux 基础教程以及结合 React 使用方式

本文教你实现一个最简单的 Redux 应用，以及结合 React 如何使用。

Redux简介

概念

状态管理工具，使用之后可以清晰的知道应用里发生了什么。数据如何修改，如何更新的。

出现的动机

以前我刚接触 Redux 这类状态管理工具的时候就在想：为什么需要这些东西呢，刷新数据就消失了，也不能持久化存储数据，有啥用呢？ 后来慢慢的应用越做越多，功能越做越复杂，就会发现，很多数据什么原因修改的，什么时候修改的，自己是一脸懵逼。啥也想不起来了，维护起来真的痛苦。到了这个时候才发现 Redux 这类工具的厉害之处。名字也很应景的，状态管理工具。说的很清楚了，就是管理状态的。让数据变化过程尽可能的清晰、可预测。

在项目中添加 Redux 并不是必须的。请根据项目需求选择是否引入 Redux

三大原则

单一数据源整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。
State 是只读的唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
使用纯函数来执行修改为了描述 action 如何改变 state tree ，你需要编写 reducers。

Redux 三要素

Action（将要发生的操作）
Reducer（根据 action 更新 state，是一个纯函数）
- 提供 combineReducers(reducers) 函数组合多个 reducer
存放 state 数据的 Store（将 action 和 reducer 联系到一起的对象）
- 提供 getState() 方法获取 state
- 提供 dispatch(action) 方法更新 state
- 通过 subsctibe(listener) 注册监听器
- 通过 subscribr(listener) 返回的函数注销监听器

示例代码

说了这边文章是教你创建一个最简单的 Redux 应用，那我们下面就看看使用一个 Redux 到底能有多简单，多快呢。

使用前先引入 Redux：npm install redux -S

先来个 Action 三要素之一不就是有 Action 么，有我们就先写一个 Action 创建函数呗

Action 创建函数，是一个返回 action 的函数，非必须这样写，只是更方便移植和复用，建议使用 Action 创建函数来生成 action
```
function increment() {
    return {
        type: "INCREMENT"
    }
}
复制代码
```

有了Action，还要有 Reducer 来执行更新啊 Reducer 既然必不可少，就在写一个 Reducer。（这里可能会有点迷糊，reducer 不是一个对象，而是一个返回更新后 state 的纯函数）

/**
* counters 就是一个 reducer，根据传入的 action 的 type 不同，返回一个新的 state 数据
*/
// 先初始化 state
const initCounter = 0;
function counters(state = initCounter, action) {
    switch(action.type) {
        case 'INCREMENT':
            return state ++;
        default:
            return state;
    }
}
复制代码

还得有一个存放 state 数据的 store 吧现在要把我们写好的 Action 和 Reducer 连接起来
- 先通过 reducer 创建 store
```
const { createStore } = require('redux');

const store = createStore(counters);
复制代码
```
- 通过 store.dispatch(action) 将 action 发送给 reducer，更新 state
```
store.dispatch(increment());
复制代码
```

查看结果

就这三步，操作完了吧，那我们现在可以看一下结果了

// 通过 store.getState() 获取 State 数据
console.log('counters: ', store.getState());   // => counters： 1
复制代码

过程总结：

创建一个操作指令 action -> 创建一个 reducer -> 通过 createStore(reducer) 创建一个 store -> 通过 store。dispatch(action) 执行 reducer 中的更新操作，更新 store 中的数据。

这些就是 Redux 的核心用法，有没有感觉很简单的，有兴趣的话可以跟我一起继续往下，看一看结合 React 该如何使用呢。

结合 React 使用

React-Redux

用来组合 React 和 Redux 配合使用的插件

以 create-react-app 脚手架为例，请先使用 create-react-app 创建一个本地项目。本例中默认 create-react-app 已全局安装过了

$ npm npm init react-app react-redux-todos
$ cd react-redux-todos
复制代码

插件安装

$ npm install redux react-redux -S
复制代码

配合组件使用

在组件根目录使用 react-redux 提供的 Prodiver 标签包裹

import { Provider } from 'react-redux';

<Provider store={ store }>
    ...
</Provider>
复制代码

在需要用到 state 或 action 的组件中使用 connect 高阶组件进行包装

import { connect } from 'react-redux';
import { createAction } from './actions'

// mapStateToProps 编写方式
const mapStateToProps = (state) => {
    return {
        reducer: state.reducer
    }
}

// mapDispatchToProps 编写方式
const mapDispatchToProps = (dispatch) => {
    return {
        createAction: text => dispatch(createAction(field));
    }
}

// 使用 connect 将 state 和 dispatch 包装到 Component 的属性中
export default connect(mapStateToProps, mapDispatchToProps)(Component);
复制代码

在组件中就可以通过 this.props.reducer 和 this.props.createAction 的方式获取数据以及调用 action 了

TodoList 示例

示例代码

预览地址

扩展

Reducer 的 combineReducers 方法

当有多个 reducer 时，创建 store 之前需要将它们先进行合并

import { combineReducers } from 'redux';

// 合并成一个 reducers
const reducers = combineReducers({
    a: doSomethingWithA,
    b: processB,
    c: c
});
复制代码

Store 的 subsctibe 方法

调用 store.subsctibe(listener) 注册监听事件 store 中的数据发生变化时，就会调用 listener 函数

/**
 * 通过 store.subscribe(function) 注册一个监听器。每次 state 更新时，都会打印输出日志
 */
store.subscribe(() => console.log(store.getState()));
复制代码

store.subsctibe(listener) 的返回值是一个注销监听的函数

/**
 * store.subscribe(func) 会返回一个函数，执行这个函数可以注销监听器
 */
// 返回一个函数 unsubscribe
const unsubscribe = store.subscribe(() => console.log(store.getState()));
// 执行这个函数可以注销监听器
unsubscribe();
复制代码

如果还没看够

Redux 中文文档

这里有关于 Redux 最详细的介绍和讲解，我就不多此一举了，有兴趣的同学可以去看看哈。