Redux进阶二：使用redux-thunk中间件实现异步请求

看过前两篇文章的朋友们都知道我们创建的action函数最终都返回🔙对象，如下：

export const getTableList = (list) => ({
  type : GET_TABLE_LIST,
  list
})

是因为store只能接受action对象，但是如果涉及到有请求发送的时候返回对象就不容易操作，有没有什么方法能否返回一个函数，在函数里面进行请求呢？
有的！！redux的中间件redux-thunk!

第一步骤：

npm install redux-thunk

同时store.js文件需要变成了如下：

import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
//这一块是从redux-thunk的gitlab上复制的代码
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
  const enhancer = composeEnhancers(applyMiddleware(thunk),);
  const store = createStore(
  reducer,
  enhancer
);
export default store;

下面进阶之路开始了！
想要实现的功能如下：

WeChat27658a9f79fd8268e64943b3e9883b94.png

两个分离的组件，通过时间的改变去请求出table的数据
首先，所有的action都放在actionTypes.js文件中

第二步骤：定义一个新的action变量

actionTypes.js

export const GET_TABLE_LIST = 'get_table_list'    //获取表格的list

第三步骤：定义一个新的action(注：所有的action都放在actionCreators.js中),同时在header.js同步书写

header.js

import React from 'react';
import {DatePicker} from 'antd';
import store from './store'
import {getTimeParams } from './store/actionCreators'
const { RangePicker, } = DatePicker;
const dateFormat = 'YYYY-MM-DD HH:mm'||undefined;
export default class TestHeader extends React.Component{
  state={
  }
  onPickerChange =(date, dateString)=> {
    this.setState({
      beginDate: dateString[0],
      endDate: dateString[1],  
    },()=>{
      let obj={
        beginDate: dateString[0],
        endDate: dateString[1],  
      }
      const action = getTimeParams(obj)  //在这里传递给action参数
      store.dispatch(action)             //通过dispatch改变store状态
    }) 
  }

  render(){
    return(
      <div>
          <RangePicker 
          onChange={this.onPickerChange} 
          showTime={{ format: 'HH:mm' }}
          format={dateFormat}
          placeholder={['开始时间','结束时间']}
        />
      </div>
    )
  }
}

actionCreators.js

import {GET_TABLE_LIST} from './actionTypes'
export const getTableList = (list) => ({
  type : GET_TABLE_LIST,
  list
})
//上面都是一个函数返回一个对象，使用redux-thunk之后可以返回一个函数，这样可以把异步请求放在这个函数中
//store接收的是对象，所以函数里面需要处理对象通过dispatch把对象传给store
export const getTimeParams =(params)=> {
  return (dispatch)=> {
    axios
    .post("safemgmt/api/queryDeviceInfos",
    {
      deviceType:"MOBILE",
      ...params
    }, 
    {headers:{token:'eyJhbGciOiJBMTI4S1ciLCJlbmMiOiJBMTI4Q0JDLUhTMjU2In0.1F72mlXkLPxZly4UugZ3Td2XSO2dPntS_VaS1LxKNlGwTKTkgFOmJQ.8YjUTaJn653y9SwKe6Xtlg.kWoO5Ik3sPqexOlkVYNOJMbUgjnbTjMdjntbSDHysmFMpSeUwALVCbSupgEbgqKb.KeKLLP6iTmUoxM4ihkfT3A'}})
    .then(res=>{
      if(res.data.code==="0"){
        const data = res.data.result.list
        const action = getTableList(data)
        dispatch(action)  //redux-thunk支持dispatch作为参数
      } 
    })
  }
}

利用redux-thunk返回一个函数，请求接口，然后，由于store只能接受对象，所以函数内部又定义了一个action对象，然后通过dispatch传给store

第四步骤：此时reducer已经接受到store状态的改变，所以reducer.js中内容为

import {GET_TABLE_LIST} from './actionTypes'
const defaultState = {
  tableList:[]
}
//reducer 可以接受state但是不可以修改state 只有store才能改变
  if(action.type === GET_TABLE_LIST){
    const newState = JSON.parse(JSON.stringify(state))
    newState.tableList = action.list
    return newState
  }
  return state;
}

第五步骤：在table.js中将数据返显

import React, { Component } from 'react';
import {Table} from 'antd';
import {getTimeParams } from './store/actionCreators'
import store from './store'
import axios from "axios";
// import EventEmitter from "../../util/events";
// const qs = require("qs");
class TestTable extends Component {
  constructor(props){
    super(props);
    this.state={
        tableListData: store.getState().tableList,//将store中的数据取到  
              }
    store.subscribe(this.getMobileTableList)  //通过 store.subscribe同步store状态的变化传给视图层
  }
  getMobileTableList=() =>{
    this.setState({
      tableListData: store.getState().tableList
    })
  } 

  render() {
    const columns = [{
        title: '请求时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 120,
      },
      //........等等
      ];  
    return (
      <div>
        <Table  
            columns={columns} 
            dataSource={this.state.tableListData} 
        />
     </div>
    );
  }
}

export default TestTable;