异步action以及redux中间件——thunk和promise的使用

最新推荐文章于 2024-07-11 15:59:19 发布

原创最新推荐文章于 2024-07-11 15:59:19 发布 · 863 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#中间件 #前端

React 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了Redux中的异步action，包括同步action与异步action的区别。当需要处理AJAX请求等异步逻辑时，需要借助Redux中间件。文中提到了两种常用的Redux中间件：redux-thunk和redux-promise。使用redux-thunk，action creator返回一个函数，接收dispatch参数来执行异步操作；使用redux-promise，action creator返回Promise。文章还给出了这两个中间件的使用示例，并指出它们可以同时使用。

一、什么是异步action

通俗的说，同步action：返回一个对象；异步action：返回一个函数

二、什么时候使用异步action

1. 同步数据流过程：

2. 异步数据流过程：

根据同步和异步数据流过程对比，我们可以看出，可以将AJAX 请求等逻辑放在异步action中。由于Redux 存储对异步逻辑一无所知，它只知道如何同步调度操作，通过调用reducer函数更新状态，并通知 UI 某些内容已更改。任何异步性都必须发生在store之外。如果需要进行异步操作，那么就需要借助Redux 中间件。

三、常用的两种中间件

1. redux-thunk

安装

npm i redux-thunk

例子：
action中

//redux-thunk
function getInfo(){
    return (dispatch)=>{
        axios({
            url:"https://xxxxx",
            method:"xxx",
            .......
            }
        }).then(res=>{
            dispatch({
                type:"xxx",
                payload:res.data.xxx
            })
        })   
    }    
}

注意：由于此时是异步action，函数getInfo中不再返回一个普通的对象，而是一个函数，该函数接收到一个dispatch参数

store中：

import {applyMiddleware, combineReducers, createStore} from 'redux'
 import reduxThunk from 'redux-thunk'
 const reducer  = combineReducers({
  AReducer,
  BReducer,
  CReducer
 })
 const store = createStore(reducer,applyMiddleware(reduxThunk));

从redux中引用applyMiddleware函数，将reduxThunk作为该函数的参数，并且最终作为createStore函数中的第二个参数

2. redux-promise

安装

npm i redux-promise

例子：
action中：

//redux-promise
function getInfo(){
    return axios({
        axios({
            url:"https://xxxxx",
            method:"xxx",
            .......
            }
    }).then(res=>{
        return {
            type:"xxx",
            payload:res.data.xxx
        }
    })
}

注意：此时函数getInfo返回的是一个Promise，需要通过

getInfo().then(res=>{
//获取返回的数据
})

store中：

import {applyMiddleware, combineReducers, createStore} from 'redux'
 import reduxPromise from 'redux-promise'
 const reducer  = combineReducers({
  AReducer,
  BReducer,
  CReducer
 })
 const store = createStore(reducer,applyMiddleware(reduxPromise));

3. redux-thunk和redux-promise可以同时使用

store中

import {applyMiddleware, combineReducers, createStore} from 'redux'
 import reduxThunk from 'redux-thunk'
 import reduxPromise from 'redux-promise'
 const reducer  = combineReducers({
  AReducer,
  BReducer,
  CReducer
 })
 const store = createStore(reducer,applyMiddleware(reduxThunk, reduxPromise));