Redux 异步操作中间件 Redux-thunk

最新推荐文章于 2023-04-21 13:54:35 发布

cofecode

最新推荐文章于 2023-04-21 13:54:35 发布

阅读量363

点赞数

分类专栏： Redux

本文链接：https://blog.youkuaiyun.com/cofecode/article/details/100008455

版权

Redux 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用Redux-thunk进行Redux的异步操作。首先，通过npm安装并配置中间件，使store.dispatch可以接受函数类型的action。然后，展示了如何在action中使用异步请求，最后解释了redux-thunk的工作原理及其在异步操作中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Redux 异步操作中间件 Redux-thunk

Redux同步修改状态数据时，Redux要求store.dispatch() 传递过来的action是个普通的js对象，这个对象用于描述对数据的操作

但是到了异步的时候，我们需要使用Redux的中间件Redux-thunk，当然中间件有很多。Redux-thunk只是其中的一个。
1.安装Redux-thunk

npm install --save redux-thunk

2.配置中间件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
 
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

此时Redux要求store.dispatch() 传递过来的action是个函数。redux-thunk会判断传递过来的action类型，是否为函数，若为函数类型，则自动调用这个function，并返回dispatch，这样在异步操作的任何时刻都可以dispatch了。

redux-thunk 源码展示

function createThunkMiddleware(extraArgument) {
	  return function (_ref) {
	    var dispatch = _ref.dispatch,
	        getState = _ref.getState;
	    return function (next) {
	      return function (action) {
	        if (typeof action === 'function') {
	          return action(dispatch, getState, extraArgument);
	        }

	        return next(action);
	      };
	    };
	  };
	}

	var thunk = createThunkMiddleware();
	thunk.withExtraArgument = createThunkMiddleware;

3.如何使用

store.dispatch(
  changeFn()
);

function changFn () {
	return (dispatch,state)=>{
      axios.get('xx').then((res)=>{
            console.log('ajax请求成功了')
            dispatch()   
        }).catch(()=>{
            console.log('error');
        });
    }
}

总结：

redux的状态更改：

view——>actions——>reducer——>state变化——>view变化（同步）

view——>actions——>redux middleware——>actions——>reducer——>state变化——>view变化 (异步)

redux middleware就是在actions和reducer之间做了一些处理，不让store.dispatch 后立即到达reducer去修改状态。
异步的时候action了两次