redux中异步请求及中间件初识

1. 组件中异步请求

在之前简单的案例中，redux中保存的counter是一个本地定义的数据，我们可以直接通过同步的操作来dispatch action，state就会被立即更新。

但是真实开发中，redux中保存的很多数据可能来自服务器，我们需要进行异步的请求，再将数据保存到redux中。

在之前学习网络请求的时候我们讲过，网络请求可以在class组件的componentDidMount中发送，所以我们可以有这样的结构：

我现在完成如下案例操作：

• 在Home组件中请求banners和recommends的数据；
• 在Profile组件中展示banners和recommends的数据；

1.1 redux代码进行如下修改：

在reducer.js中添加state初始化数据和reducer函数中处理代码：

const initialState = {
  counter: 0,
  banners: [],
  recommends: []
}

function reducer(state = initialState, action) {
  switch (action.type) {
    case ADD_NUMBER:
      return { ...state, counter: state.counter + action.num };
    case SUB_NUMBER:
      return { ...state, counter: state.counter - action.num };
    case CHANGE_BANNER:
      return { ...state, banners: action.banners };
    case CHANGE_RECOMMEND:
      return { ...state, recommends: action.recommends };
    default:
      return state;
  }
}

constants中增加常量：

const CHANGE_BANNER = "CHANGE_BANNER";
const CHANGE_RECOMMEND = "CHANGE_RECOMMEND";

actionCreators.js中添加actions：

const changeBannersAction = (banners) => ({
  type: CHANGE_BANNER,
  banners
}) 

const changeRecommendsAction = (recommends) => ({
  type: CHANGE_RECOMMEND,
  recommends
})

1.2 组件中代码代码修改：

Home组件：

import React, { PureComponent } from 'react';
import { connect } from "react-redux";

import axios from 'axios';

import {
  addAction,
  changeBannersAction,
  changeRecommendsAction
} from '../store/actionCreators';

class Home extends PureComponent {
  componentDidMount() {
    axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
      const data = res.data.data;
      this.props.changeBanners(data.banner.list);
      this.props.changeRecommends(data.recommend.list);
    })
  }

  //...其他代码
}

const mapStateToProps = state => {
  return {
    counter: state.counter
  }
}

const mapDispatchToProps = dispatch => {
  return {
    addNumber: function(number) {
      dispatch(addAction(number));
    },
    changeBanners(banners) {
      dispatch(changeBannersAction(banners));
    },
    changeRecommends(recommends) {
      dispatch(changeRecommendsAction(recommends));
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

Profile组件：

import React, { PureComponent } from 'react';
import { connect } from "react-redux";

import {
  subAction
} from '../store/actionCreators';

class Profile extends PureComponent {
  render() {
    return (
      <div>
        Profile
        <div>
          <h2>当前计数: {this.props.counter}</h2>
          <button onClick={e => this.decrement()}>-1</button>
          <button onClick={e => this.subCounter()}>-5</button>
        </div>
        <h1>Banners</h1>
        <ul>
          {
            this.props.banners.map((item, index) => {
              return <li key={item.acm}>{item.title}</li>
            })
          }
        </ul>
        <h1>Recommends</h1>
        <ul>
          {
            this.props.recommends.map((item, index) => {
              return <li key={item.acm}>{item.title}</li>
            })
          }
        </ul>
      </div>
    )
  }

  //...其他逻辑代码
}

const mapStateToProps = state => {
  return {
    counter: state.counter,
    banners: state.banners,
    recommends: state.recommends
  }
}

const mapDispatchToProps = dispatch => {
  return {
    subNumber: function (number) {
      dispatch(subAction(number));
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Profile);

2. redux中异步请求

上面的代码有一个缺陷：

• 我们必须将网络请求的异步代码放到组件的生命周期中来完成；
• 事实上，网络请求到的数据也属于我们状态管理的一部分，更好的一种方式应该是将其也交给redux来管理；

但是在redux中如何可以进行异步的操作呢？

• 答案就是使用中间件（Middleware）；
• 在这类框架中，Middleware可以帮助我们在请求和响应之间嵌入一些操作的代码，比如cookie解析、日志记录、文件压缩等操作；

2.1中间件（Middleware）

redux也引入了中间件（Middleware）的概念：

• 这个中间件的目的是在dispatch的action和最终达到的reducer之间，扩展一些自己的代码；
• 比如日志记录、调用异步接口、添加代码调试功能等等；

我们现在要做的事情就是发送异步的网络请求，所以我们可以添加对应的中间件：

• 这里官网推荐的、包括演示的网络请求的中间件是使用 redux-thunk；

redux-thunk是如何做到让我们可以发送异步的请求呢？

• 我们知道，默认情况下的dispatch(action)，action需要是一个JavaScript的对象；
• redux-thunk可以让dispatch(action函数)，action可以是一个函数；
• 该函数会被调用，并且会传给这个函数一个dispatch函数和getState函数；
  • dispatch函数用于我们之后再次派发action；
  • getState函数考虑到我们之后的一些操作需要依赖原来的状态，用于让我们可以获取之前的一些状态；

2.2如何使用redux-thunk呢？

2.2.1.安装redux-thunk

yarn add redux-thunk

2.2.2.在创建store时传入应用了middleware的enhance函数

• 通过applyMiddleware(应用中间件)来结合多个Middleware, 返回一个enhancer；
• 将enhancer作为第二个参数传入到createStore中；

store中的index.js：

import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';

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

// 将enhancer作为第二个参数传入到createStore中
const store = createStore(reducer, enhancer);

2.2.3.定义返回一个函数的action：

• 注意：这里不是返回一个对象了，而是一个函数；
• 该函数在dispatch之后会被执行；

store中的actionCreators.js:

import axios from 'axios';

//redux-thunk中定义的action函数
export const getHomeMultidataAction = (dispatch，getState) => {
    axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
      const data = res.data.data;
      dispatch(changeBannersAction(data.banner.list));
      dispatch(changeRecommendsAction(data.recommend.list));
    })
}

2.2.4.修改home.js中的代码：

import React, { PureComponent } from 'react';
import { connect } from "react-redux";

import {
  addAction,
  getHomeMultidataAction
} from '../store/actionCreators';

class Home extends PureComponent {
  componentDidMount() {
    this.props.getHomeMultidata();
  }

  //...其他逻辑代码
}

const mapStateToProps = state => ({
  counter: state.counter
})

const mapDispatchToProps = dispatch => {
  return {
    addNumber: function(number) {
      dispatch(addAction(number));
    },
    
    getHomeMultidata() {
        //传入的直接是一个函数，会被直接在action中主动的调用
      dispatch(getHomeMultidataAction);
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

下次会讲解有关中间件的原理