什么是thunk?

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

　　那么它是怎么作用在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会大大简化工作。

　　Action可以做点什么吗?

　　Action虽然叫action，但其实什么都不做，只是对象而已。它们可以自己做点什么吗?比如像调用api或是触发其他actions?

　　因为reducer必须是纯函数，我们不能在reducer里调用api或是触发其他actions。

　　如果我们希望action做些什么，就要把代码放进一个函数中去，这个函数就是thunk。

　　Action creators返回一个函数而不是一个action对象。

　　function getUser() {

　　return function() {

　　return axios.get('/current_user');

　　};

　　}

　　那么怎么让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());

　　});

　　};

　　}

　　如何使用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)

　　);

上一篇

前端面试题——双向数据绑定和单向数据流有哪些特点

下一篇

前端面试题——你对TS了解多少？