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
【Redux进阶二（使用redux-thunk中间件实现异步请求）】两个分离的组件，通过时间的改变去请求出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 = https://www.it610.com/article/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;
推荐阅读
- EffectiveObjective-C2.0|EffectiveObjective-C2.0 笔记 - 第二部分
- 遇到一哭二闹三打滚的孩子，怎么办┃山伯教育
- 赢在人生六项精进二阶Day3复盘
- 2019年12月24日
- 陇上秋二|陇上秋二 罗敷媚
- 一百二十三夜，请嫁给我
- 迷失的世界（二十七）
- 我要我们在一起（二）
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- (二)ES6第一节变量(let|(二)ES6第一节变量(let,const)