安装 npm install redux-thunk -S
作用:增强redux的功能,让redux中dispatch()可以派发一个函数,可以把函数抽离出来以便其他地方使用
项目结构
// 在store全局状态下
// index.js
// 原本只需要引入一个createStore,现在需要引入applyMiddleware(类似于中间件)
import { createStore, applyMiddleware } from "redux";
import thunk from 'redux-thunk'
import reducer from './reducer'
// 参数1:reducer函数,用于管理状态的函数
// 参数2:是增强redux的功能,使用 thunk 插件,如果有多个插件用数组的方式引入applyMiddleware([thunk,xxxx,xxxx])
// 【注】原本参数2是全局状态state初始值,由于reducer函数抽离出去了,并给了对应的默认值,可以不写
// 本身store.dispatch()接收对象
// 使用thunk之后,store.dispatch()接收既可以对象又可以接收函数
const store = createStore(reducer, applyMiddleware(thunk));
export default store;
在项目中使用目录结构
// 在项目中实际使用,结合了 react-redux 在此之前要复习一下react-redux的使用
// 在容器组件 Two.js 中
import {getDataAction} from './twoAction' // 引入action函数
function mapDispatchToProps(dispatch){
return {
async getData(){
// 现在可以传入一个函数了,getDataAction()不加括号直接传入名字也可以执行
dispatch(getDataAction);
}
};
}
// 在twoAction.js中
export const setDataAction = (data)=>{
return {
type: 'set-two-data',
data
}
}
//数据异步处理
export const getDataAction = async (dispatch)=>{
// 请求数据
let response = await fetch('/topic/v1/find/getTabData.json?page=1&size=5&tabId=6');
// json处理数据
let data = await response.json();
// 对数据进行过滤
let newData = data.data.result.map(({picUrl,title, topicId})=>({picUrl,title, id: topicId }));
// 组装action
let action = setDataAction(newData);
// 派发
dispatch(action);
}