redux-thunk
2018-10-14 本文已影响51人
422ccfa02512
一、redux-thunk介绍
redux-thunk用于处理异步action,同类型的有redux-saga
二、学习网址
https://github.com/reduxjs/redux-thunk github
三、安装与引入
npm install --save react-redux
安装
import thunk from 'redux-thunk'
引入
三、如何使用redux-thunk
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
// 创建store的时候,第二个参数是中间件,redux-thunk提供了一个thunk中间件,用于处理异步的action
export default createStore(
rootReducer,
applyMiddleware(thunk)
);
//异步的action, 由于使用了redux-thunk的thunk中间件,
//所以,在这个action里不用像同步action那样,必须返回一个对象,在这里返回一个方法
//这个方法有一个dispatch的参数,这个dispatch就是store里的dispatch.
export const addAsync = (num = 1) => {
return (dispatch) => {
// 当这个方法刚进来的时候,就马上告诉reducer,我要开始获取数据了,
// reducer接收到这个动作,就会执行相应的操作(把isLoading改为true,看reducer里的代码)
dispatch({
type: START_GET_DATA
});
// 用setTimeout来模拟获取数据
setTimeout(() => {
// 获取数据完成之后,需要dispatch两个action.
// 一个是把获取到的数据,传到一个动作里(ADD)
dispatch({
type: ADD,
num
});
// 这个是用来告诉reducer,我获取数据成功了。reducer接收到这个动作,
// 就会执行相应的操作(把isLoading改为false,看reducer里的代码)
dispatch({
type: GET_DATA_SUCCESS
});
}, 2000)
}
}