React 之 Redux 异步处理——redux-thunk

最新推荐文章于 2024-03-23 09:31:27 发布

前端之神

最新推荐文章于 2024-03-23 09:31:27 发布

阅读量1.6k

点赞数 1

分类专栏： react 文章标签： javascript reactjs

本文链接：https://blog.csdn.net/qq_42941302/article/details/113509055

版权

react 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

什么是 redux-thunk

redux-thunk 是一个中间件，专门用来解决 action 中的异步处理。
redux提供了一个方法 applyMiddleware 用来使用中间件。
redux-thunk 的安装方法：cnpm i redux-thunk -S

redux-thunk的规则：

通常情况下，action必须是一个对象，或者返回一个对象；

在使用redux-thunk之后，允许action返回一个函数，函数有个参数dispatch
在需要进行异步处理的时候返回函数，函数里有参数dispatch，根据参数dispatch来抛发你的新action
redux-thunk的底层原理是根据返回的是不是函数来决定是否给你参数让你进行操作

redux-thunk的使用：

在 store/index.js 中，使用中间件 redux-thunk

import { createStore,applyMiddleware } from 'redux'
import reduxThunk from 'redux-thunk'
import reducers from './reducers'

// 创建 store 的时候，使用中间件
const store = createStore(reducers,applyMiddleware(reduxThunk));
export default store;

在需要处理异步的异步action 中，返回一个异步函数而不是对象

// 组件中抛发这个外部action，而真正的action是在内部被抛发的
export const myAsyncAction = ()=>{
    
    // 在异步action中，定义一个需要抛发的action，参数就是要做异步处理的数据
    let myAction = (val)=>({
        type:myType,
        value:val
    })
    
    // 返回一个异步函数，异步函数有一个dispatch参数
    // 函数内进行异步请求，然后将数据赋值给自定义的 action 中，再把自定义的 action 抛发出去
    return async (dispatch)=>{
        let data = await getDataApi();
        dispatch(myAction(data))
    }
}

至此，action的异步处理就完成了，接下来的步骤按照正常的redux流程走即可

React 中的中间件的概念

react中的中间件其实就是 action 与 reducers 之间的一个应用。用来影响双方交互的值。

redux-thunk的源码

function createThunkMiddleware(extraArgument){
    return function (_ref){
        var dispatch = _ref.dispatch,
            getState = _ref.getState;
        return function(next){
            return function(action){
                if(typeof action === 'function'){
                    return action(dispatch, getState, extraArgument);
                }
                
                return next(action)
            }
        }
    }
}

var thunk = createThunkMiddleware();