版权声明:Oreo https://blog.csdn.net/weixin_43154931/article/details/82589736
redux中间件—redux thunk 使用
redux中 action返回的是一个对象数据,redux-thunk中间件可以使其看起来直接返回了function
1. 配置过程
1.1. 安装redux-thunk
npm install --save redux-thunk;
1.2. 在store文件引入thunk
import ReduxThunk from 'redux-thunk';
1.3. 修改store 文件
旧 store
import { createStore } from 'redux';
import reducers from './../reducers';
const store = createStore(reducers);
export default store;
新 store
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from './../reducers';
const store = createStore(reducers, applyMiddleware(thunk));
export default store;
ps: 配置redux - devtools
最新store
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from './../reducers';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, composeEnhancers(
applyMiddleware(thunk)
));
export default store;
使用实例
旧 action
export const addTestD = (some) => ({
type: actionTypes.ADD_TEST,
number: some
});
使用thunk之后的action
export const addTest = (number) => {
return (dispatch) => {
// 可以在这里增加其他代码, 请求之类
dispatch({
type: actionTypes.ADD_TEST,
number: number
})
}
};