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 的 subscribe 方法

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

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

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

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

若是还没看够

Redux 中文文档

这里有关于 Redux 最详细的介绍和讲解，我就很少此一举了，有兴趣的同窗能够去看看哈。