【React系列】Redux(二)中间件

本文来自#React系列教程：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)

一. 中间件的使用

1.1. 组件中异步请求

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

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

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

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

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

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
})

组件中代码代码修改：

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);