一分钟学会在|一分钟学会在 Redux 中使用 redux-thunk 进行异步操作
本文主要介绍了在 Redux 中使用 redux-thunk 进行异步操作。
如果对 Redux 尚不熟悉，建议先看我的上一篇博客：Redux 基础教程以及结合 React 使用方式。
【一分钟学会在|一分钟学会在 Redux 中使用 redux-thunk 进行异步操作】最下方贴上了 applyMiddleware 和 redux-thunk 的实现源码，有兴趣的同学可以看一看。只能用两个字来形容：优秀。
在项目中引入
- 安装插件
$ npm install redux-thunk -S; 复制代码
注意： 使用 commonJs 方式引入时要注意，这样引入才可以正常使用：
const thunk = require('redux-thunk').default
- 在创建 store 时引入 redux-thunk
import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; // 创建 store // applyMiddleware，在 Redux 中使用中间件时，就需要使用 applyMiddleware() 这个函数进行包裹 const store = createStore(reducer, applyMiddleware(thunk)); 复制代码
- 在 action 中的书写方式
// 异步请求成功会用到的同步 action 创建函数 function actionSuccess(msg) { return { type: 'SUCCESS', message: msg } }// 异步请求失败会用到的同步 action 创建函数 function actionError() { return { type: 'ERROR' } }// 暴露出异步 Action export function asyncAction(param) { // 异步 action 的固定写法，返回一个函数，第一个参数为 dispatch 函数，第二个参数为 state return (dispatch, state) => { // 执行异步操作 fetch(url) .then(reponse => response.json) // 请求成功调用成功的同步 Action .then(json => dispatch(actionSuccess(actionSuccess))) .catch(error => dispatch(actionError())) } } 复制代码
- 在组件中调用
- 在组件中和调用同步 Action 一致
store.dispatch(asyncAction(param)); 复制代码
- 在 Reducer 中不需要处理异步 Action，还是只关注同步 Action 即可。因为异步 Action 结束之后还是会调用同步 Action 发送数据更新指令
本文只是单纯的记录一下 redux-thunk 中间件如何进行使用，想要深入了解 applyMiddleware 中间件和 redux-thunk 实现原理的朋友可以移步至阮老师的
Redux 入门教程（二）：中间件与异步操作
applyMiddleware 源码
function applyMiddleware() {
for (var _len = arguments.length, middlewares = new Array(_len), _key = 0;
_key < _len;
_key++) {
middlewares[_key] = arguments[_key];
}return function (createStore) {
return function () {
var store = createStore.apply(void 0, arguments);
var _dispatch = function dispatch() {
throw new Error("Dispatching while constructing your middleware is not allowed. " + "Other middleware would not be applied to this dispatch.");
};
var middlewareAPI = {
getState: store.getState,
dispatch: function dispatch() {
return _dispatch.apply(void 0, arguments);
}
};
var chain = middlewares.map(function (middleware) {
return middleware(middlewareAPI);
});
_dispatch = compose.apply(void 0, chain)(store.dispatch);
return _objectSpread({}, store, {
dispatch: _dispatch
});
};
};
}
复制代码redux-thunk 源码
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}return next(action);
};
}const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
复制代码
