1. 什么是thunk? thunk可以理解为函数的另一种称呼，但不是以前我们说的简单函数。Thunk代表的是一个被其他函数返回的函数。

　　2. 那么它是怎么作用在redux上的呢?

　　Redux中有几个概念：”actions”，”action creators”，”reducer”，“middleware” Actions就是普通对象，并且一定有一个type属性，除了这个，你可以在对象中自定义你想要描述该action的数据。

　　// 1. plain object

　　// 2. has a type

　　// 3. whatever else you want { type: "USER_LOGGED_IN", username: "dave" } 每次都要手写action对象会很麻烦，redux有一个“action creators”的概念来简化。function userLoggedIn() { return { type: 'USER_LOGGED_IN', username: 'dave' }; } 你可以通过调用userLoggedIn函数来生成这个action，如果你在app中多次dispatch同样的action，使用action creators会大大简化工作。

　　1. Action可以做点什么吗? Action虽然叫action，但其实什么都不做，只是对象而已。它们可以自己做点什么吗?比如像调用api或是触发其他actions? 因为reducer必须是纯函数，我们不能在reducer里调用api或是触发其他actions。

　　如果我们希望action做些什么，就要把代码放进一个函数中去，这个函数就是thunk。 Action creators返回一个函数而不是一个action对象。function getUser() { return function() { return axios.get('/current_user'); }; }

　　1. 那么怎么让Redux处理actions是函数的情况呢?我们就引入了redux-thunk，它是一个中间件，每次action都会经历它，如果action是一个函数，就调用这个函数，这就是redux-thunk做的事。 传递给thunk函数的就是两个参数：

　　- Dispatch，如果它们需要，可以dispatch新的action。

　　- getState，它们可以获取最新的state。function logOutUser() { return function(dispatch, getState) { return axios.post('/logout').then(function() { // pretend we declared an action creator // called 'userLoggedOut', and now we can dispatch it dispatch(userLoggedOut()); }); }; }

　　1. 如何使用redux-thunk

　　- 安装redux-thunk包 npm install --save redux-thunk

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

上一篇

redux有什么优缺点

下一篇

说一下redux的使用流程，dispash是从哪里解构出来的