redux 异步action

redux 异步action

yarn add redux-thunk

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

function reudcer(state=0, action){
    // ...
}

let store = createStore(
    reducer,
    applyMiddleware(thunkMiddleware)
)

function incrementAsync() {
    return dispatch => {
        setTimeout(() => { 
            // dispath一个action
            dispatch({type: 'ADD'});
        }, 1000);
    };
}

// dispatch上面那个异步函数
store.dispatch(incrementAsync());

// 这就是一个简单的demo

参考 Redux Thunk

api请求demo

function foo(){
    return function(dispatch){
        retrun axios('http://localhost:4000').then(
            data => dispatch({type: 'FERCH_DATA', data}),
            err => dispatch({type: 'FETCH_ERR', err}),
        )
    }
}

store.dispatch(foo());

// 上述foo可用箭头函数改写，实现柯里化
const foo = dispatch => axios('...').then(...);