Redux 异步操作指南：使用 redux-thunk 和 redux-saga

原创

已于 2024-04-21 17:27:34 修改 · 960 阅读

标签

#react.js #redux异步 #redux-saga基础 #redux-thunk基础

收录于

于 2024-04-09 20:08:59 首次发布

Redux 本身不支持异步操作，可通过中间件实现。常用中间件有 redux-thunk 和 redux-saga。前者允许 action creator 返回函数，接受 dispatch 和 getState 作参数；后者用 ES6 生成器函数管理异步，能管理副作用，保持 action 和 reducer 纯净，并给出二者使用示例。

在这里插入图片描述
Redux 本身是不支持异步操作的，但是可以通过中间件来实现异步任务。最常用的中间件就是 redux-thunk 和 redux-saga。

redux-thunk：

redux-thunk 中间件允许你写 action creator 返回函数而不是 action。这个函数会由 redux-thunk 中间件执行，并且会接受 dispatch 和 getState 作为参数。

以下是一个使用 redux-thunk 进行异步操作的示例：

首先，安装 redux-thunk：

npm install --save redux-thunk

然后，在创建 store 时应用中间件：

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

const store = createStore(rootReducer, applyMiddleware(thunk));

接下来，编写一个返回函数的 action creator 来处理异步操作：

const fetchPosts = () => {
   
   
  return dispatch => {
   
   
    dispatch({
   
    type: 'FETCH_POSTS_REQUEST' });
    axios.get('/posts')
      .then(