react中dispatch_通过一个例子看看React是如何进行数据通信的第4篇

点击蓝字 关注我们

本专栏主要讲讲 React 中数据通信的几种方式：

• 通过一个例子看看React是如何进行数据通信的-第1篇--props和事件回调
• 通过一个例子看看React是如何进行数据通信的-第2篇--Context对象
• 通过一个例子看看React是如何进行数据通信的-第3篇--useContext
• 通过一个例子看看React是如何进行数据通信的-第4篇--Redux

随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理越来越多的 state 。比如说服务器响应、缓存数据、 UI 状态、分页器、loading 等等。而 Redux 就是 JavaScript 的一种状态容器，能提供可预测化的状态管理。

本身 Redux 是比较简单的，在项目中使用需要先安装依赖模块：

npm install redux --save

然后先来看看他的几个核心概念。

store

store 是一个对象，保存了整个应用的 state ，相当于一个保存数据的容器，且该容器在整个应用中有且只有一个。

创建方式如下：

// ./index.js
import { createStore } from 'redux'
import reducer from './reducers'
let store = createStore(reducer)

createStore(reducer, [preloadedState], enhancer) 用来创建一个 store 来存放应用中所有的 state，参数 reducer 是一个函数，参数 preloadedState 是初始时的 state，会覆盖 reducer 函数中的默认初始值，参数 enhancer 是一个高阶函数，用于返回一个新的强化过的 store creator。

想要获取应用的 state 可以通过 getState() 方法获取：

console.log(store.getState())

reducer

是一个函数，会根据不同的 action 来决定如何响应并返回一个新的 state。reducer 接收两个参数，参数1是当前的 state，参数2是 action。

// ./reducers/index.js

let initState = { // 初始 state
  count: 0
}

function reducer(state = initState, action) {
     
  switch(action.type) { // 根据传入的 action 对象的 type 字段来决定如何响应 state 的变化
    case 'INCREMENT':
      return { count: state.count + 1 }
    case 'DECREMENT':
      return { count: state.count - 1 }
    default: // 无任何匹配时返回初始的 state
      return state
  }
}

这里需要注意的是 reducer 是一个纯函数：

• 不要修改传入的参数；
• 不要执行有副作用的操作，例如 API 请求、路由跳转等；
• 不要调用非纯函数，例如 Date.now()、Math.random() 等。

action

是一个描述事件的简单对象，告诉我们发生了什么事情，reducer 函数会根据 action 去改变 state，其中 action 必须拥有 type 属性，用于决定要执行的行为，其他属性可任意设置：

const incrementActionType = {
     
  type: 'INCREMENT'
}

const addCounterActionType = {
     
  type: 'ADD_COUNTER',
  step: 2
}

一般我们会通过一个工厂方法来返回一个 action 对象：

function addCounter(num) {
     
  return {
     
    type: 'ADD_COUNTER',
    step: num
  }
}
export default addCounter

dispatch

action 描述发生了什么事情，但是这个事情并不会主动发生，而是需要通过 dispatch 方法来触发，它将 action 发送到 reducer 函数中，然后 reducer 函数根据匹配规则进行状态的更新。

import addCounter from './actions'
store.dispatch(addCounter(1))

这是触发 state 改变的惟一途径。

subscribe

添加一个变化监听器，每当 dispatch action 的时候都会执行的回调。

store.subscribe(() => {
     
  console.log('state 发生了改变: ', store.getState().count)
})

一个完整的列子：

import { createStore } from 'redux'

// 生成 Action 的函数
function incAction() {
     
  return { type: 'INCREMENT' };
}
function decAction(num) {
     
  return { type: 'DECREMENT', step: num };
}

// reducer 函数
function reducer(state = { count: 0 }, action) {
     

  switch (action.type) {
     
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - action.step }; // 根据 action 其他字段作为数据来源
    default:
      return state; // 无论如何都返回一个 state
  }
}

const store = createStore(reducer); // 应用唯一 store
console.log( store.getState().count ); // 初始的时候值：0

// 监视当前 state 的变化
store.subscribe(() => {
     
  console.log(store.getState().count);
});

store.dispatch(incAction()); // 1
store.dispatch(incAction()); // 2
store.dispatch(incAction()); // 3
store.dispatch(decAction(2)); // 1