Skip to main content

使用Redux-thunk中间件进行ajax数据发送

redux-thunk: https://github.com/search?q=redux-thunk

#install
yarn add redux-thunk

改写src/store/index.js, 使支持redux-thunkredux devtools, 参考 https://github.com/zalmoxisus/redux-devtools-extension

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';

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;

这时actionCreator返回的不再是一个对象了,而是一个函数,在函数中,我们就可以进行异步操作。

完整的demo:https://github.com/scott-x/react-demo/tree/master/redux-thunk%E7%9A%84%E4%BD%BF%E7%94%A8