redux-thunk简介

前言

redux-thunk是一个redux 的中间件。是官方推荐解决redux解决异步问题的一个库。

为啥使用thunk

在我们使用bindActionCreators将所有的action写在单独的文件中的时候,一般是这样写:

1
2
3
//action.js
export const add = () => ({"type" : "ADD" , "n" : 1});
export const minus = () => ({"type" : "MINUS" , "n" : 1});

这样写action的时候,一般里面的函数,只能直接返回{"type" : "ADD" ,payload}。当我们遇到异步操作的时候,此时就会出现问题了。例如我们想要在请求服务器之后进行dispatch:

1
2
3
4
5
6
7
//action.js
export const addServer = () => {
$.get("/api" , function(data){
console.log(data.a);
dispatch({"type" : "ADD" , "n" : data.a}) //报错!!
});
};

由于dispatch在action.js里面不是变量,所以没法调用。

  • 简单的说我们遇见的挑战就是:
    action文件的写法过于死板,必须return一个action JSON,我们没有dispatch可用了!
  • 官方说明:
    1
    Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.

redux-thunk如何使用

1、安装,引用

1
2
3
4
5
6
7
8
9
//app.js
import {createStore , applyMiddleware} from "redux";
......
import logger from "redux-logger";
import thunk from "redux-thunk";
const store = createStore(reducers , applyMiddleware(logger , thunk));
......

2、在actionCreator中返回函数,而不是action JSON

1
2
3
4
5
export const addServer = () => (dispatch , getState) => {
$.get("/api" , function(data){
dispatch({"type" : ADD , "n" : data.a})
});
};

具体用法参考 redux-thunk

总结优点

  • 解决了异步无法使用dispatch的相关问题
  • 解决了所有有副作用的问题。(比如,在异步的时候,进行if条件语句判断)