使用redux-thunk中间件实现ajax数据请求

1.安装npm install redux-thunk

npm install redux-thunk

2.引入redux-thiunk

  

import {createStore, applyMiddleware,compose} from 'redux';
import reducer from './reducer'
import thunk from 'redux-thunk';
//浏览器有redux插件，加这句话可以进行调试  https://github.com/zalmoxisus/redux-devtools-extension
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

 demo

1)使用中间件（redux-thunk）的组件

componentDidMount () {
        const action = getTodoLlist()
        store.dispatch(action)
    }

2）actionCreator.js

export const getTodoLlist = () => {
    return () => {
        axios.post('/list.json').then((res)=>{
            console.log(res)
            const data = res.data;
            const action = initListAction(data)
            store.dispatch(action);
        })
    }
}