redux-thunk的使用

redux-thunk 是一个比较流行的 redux 异步 action 中间件。redux-thunk 帮助你统一了异步和同步 action 的调用方式，把异步过程放在 action 级别解决，对 component 没有影响。下面通过例子一步步来看看。

也就是说之前我们在组件的生命周期中使用异步，现在可以在actions中使用异步。

redux-thunk中间件可以让actions创建函数不仅仅 返回一个对象，也可以返回一个函数

store.js

import { createStore, applyMiddleware, compose } from 'redux'
import reducre from './reducre'
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(reducre, enhancer);



export default store;

actions.js

import { DELETE_DATAS, GET_ALL } from './actionTypes';
import { getTodoList } from '../api/index'

const deles = (todoId) => ({
    type: DELETE_DATAS,
    todoId
})


const getALL = () => {
    return (dispatch) => {
        getTodoList().then(res => {
            if (res.status == 200) {
                var todos = res.data.data.list
                dispatch({
                    type: GET_ALL,
                    todos
                })
            }
        })
    }
}
export { deles, getALL }

组件声明周期

componentDidMount() {
const actions = getALL();
store.dispatch(actions)
}

现在组件和数据之间的耦合性就更佳降低了