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条件语句判断)