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;

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


Redux进阶二:使用redux-thunk中间件实现异步请求_第1张图片
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(
      
) } }
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 (
      
); } } export default TestTable;

你可能感兴趣的:(Redux进阶二:使用redux-thunk中间件实现异步请求)