react同步请求_React系列十七 - Redux(三)中间件

来源|coderwhy

一. 中间件的使用

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

Profile组件：

import React, { PureComponent } from 'react';import { connect } from "react-redux";import {  subAction} from '../store/actionCreators';class Profile extends PureComponent {  render() {    return (      

        Profile        

          

当前计数: {this.props.counter}

           this.decrement()}>-1           this.subCounter()}>-5