Redux中间件

在上一篇文章中讲了redux的使用，redux中保存的counter是一个本地定义的数据，我们可以直接通过同步的操作来dispatch action，state就会被立即更新。
但是实际的开发中，redux中管理的很多数据可能来自服务器，我们需要进行异步的请求，再将数据保存到redux中。就是说在异步的网络请求中通过dispatch action来更新state中的数据。这时候就需要用到Redux中间件了。
具体应用如下：
一、中间件的引入，安装redux-thunk

yarn add redux-thunk

二、在创建store时传入应用了middleware的enhance函数
1、通过applyMiddleware来结合多个Middleware, 返回一个enhancer；
2、将enhancer作为第二个参数传入到createStore中；

import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk'
import reducer from './reducer';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

// 通过applyMiddleware来结合多个Middleware, 返回一个enhancer
const enhancer = composeEnhancers(applyMiddleware(thunkMiddleware));

const store = createStore(reducer, enhancer);

export default store;

三、在actionCreators.js中定义一个方法getJokeData，方法内部进行网络请求，在网络请求成功的回调中调用其他的action去更新store管理的数据。

import {
  ADD_NUMBER,
} from './constants.js'
import axios from 'axios'

const addAction = (count) => ({
  type: ADD_NUMBER,
  num: count
});

const getJokeData = () => {
  return (dispatch) => {
    axios.get('https://autumnfish.cn/api/joke/list?num=1')
    .then(res => {
      // 网络请求成功后，调用addAction方法去更新counter数据
      dispatch(addAction(6))
    })
  }
}

export {
  addAction,
  getJokeData
}

我的理解是像网络请求这种异步操作，获取到的数据要用来去更新store管理的数据，就需要在网络请求的回调中，去触发能更新store中管理数据的action，这种异步操作需要通过中间件来实现。