看过前两篇文章的朋友们都知道我们创建的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;
