# Redux-thunk

redux-thunk是redux的中间件,其增强了redux的dispatch功能。

在redux中,我们通过dispatch方法将action传送给reducer,而dispatch方法只能接受对象类型的action参数。因此我们无法实现异步的操作。

引入redux-thunk中间件后,action可以为函数,就可以实现异步操作了。

# 安装

npm install --save redux-thunk

# 实现原理

首先阅读一下中间件原理

其实现非常简单,判断每个经过此中间件的action类型。

  • 如果是function,就调用这个函数,并传入dispatch、getState以及extraArugment参数,而不是任由它到达reducer。
  • 否则,直接进入下一个中间件,不做任何处理。

然后,然后就没了,redux-thunk原理就这点。

# 代码展示

// 入口文件 store/index.js
import {createStore, applyMiddleware, combineReducers} from 'redux';
import * as reducers from '@/reducer';
import thunk from 'redux-thunk';

const store = createStore(
  combineReducers(reducers), // 组合多个Reducers
  {
    preloadedState: '预加载数据'
  }
  applyMiddleware(thunk) // 这里引入redux-thunk
); 

export default store;

# 总结

是的,redux-thunk就实现这样简单的功能:action参数支持函数

这个库目前已经获得15k star,但是你可能不知道,redux-thunk全部代码一共11行。

redux-thunk Github链接 (opens new window)

最近更新时间: 2020/9/6 11:30:38