React Redux 中触发异步副作用

最新推荐文章于 2025-06-09 20:59:47 发布
最新推荐文章于 2025-06-09 20:59:47 发布
阅读量557 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： # React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42938619/article/details/128090559
这篇博客介绍了在ReactRedux中如何处理异步副作用，包括组件内直接操作和使用custom action creator。通过示例展示了如何在`useEffect`中调用异步API并更新UI状态，以及创建自定义action creator来封装共用逻辑，减少重复代码。这种方式适用于多个组件间需要共享相同API调用和UI反馈的情况。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

React Redux 中触发异步副作用

一些基本的配置（这里使用 toolkit）可以在这篇笔记中找到：react-redux 使用小结，这里不多赘述。

触发副作用主流的操作方式有两种：

  1. 组件内操作

    适合只会在当前组件中触发的 API 操作

  2. 写一个 action creator 进行操作

    适合跨组件操作

二者并没有谁好谁坏的区别，主要还是依赖于业务需求

组件内触发

cart slice 的实现如下：

import { createSlice } from '@reduxjs/toolkit';
import { uiActions } from './ui-slice';

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    items: [],
    totalQuantity: 0,
    totalAmount: 0,
  },
  reducers: {
    addItemToCart(state, action) {
      const newItem = action.payload;
      const existingItem = state.items.find((item) => item.id === newItem.id);
      state.totalQuantity++;
      if (!existingItem) {
        state.items.push({
          id: newItem.id,
          price: newItem.price,
          quantity: 1,
          total: newItem.price,
          title: newItem.title,
        });
        return;
      }

      existingItem.quantity++;
      existingItem.total += existingItem.price;
    },
    removeItemFromCart(state, action) {
      state.totalQuantity--;
      const id = action.payload;
      const existingItem = state.items.find((item) => item.id === id);
      if (existingItem.quantity === 1) {
        state.items = state.items.filter((item) => item.id !== id);
        return;
      }
      existingItem.quantity--;
      existingItem.total -= existingItem.price;
    },
  },
});

export const cartActions = cartSlice.actions;

export default cartSlice;

这个就相当于一个比较基本的购物车功能

UIslice：

import { createSlice } from '@reduxjs/toolkit';

const uiSlice = createSlice({
  name: 'ui',
  initialState: {
    cartIsVisible: false,
    notification: null,
  },
  reducers: {
    toggle(state) {
      state.cartIsVisible = !state.cartIsVisible;
    },
    showNotification(state, action) {
      state.notification = {
        status: action.payload.status,
        title: action.payload.title,
        message: action.payload.message,
      };
    },
  },
});

export const uiActions = uiSlice.actions;

export default uiSlice;

这就是一些 UI 相关的操作。

app.js：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux';
import Cart from './components/Cart/Cart';
import Layout from './components/Layout/Layout';
import Products from './components/Shop/Products';
import Notification from './components/UI/Notification';
import { uiActions } from './store/ui-slice';

// to avoid empty data being sent during initial mount
let isInitial = true;

function App() {
  const dispatch = useDispatch();
  const { cartIsVisible, notification } = useSelector((state) => state.ui);
  const cart = useSelector((state) => state.cart);

  useEffect(() => {
    const sendCartData = async () => {
      dispatch(
        uiActions.showNotification({
          status: 'pending',
          title: 'sending',
          message: 'Sending cart data',
        })
      );
      const res = await fetch('some api here', {
        method: 'PUT',
        body: JSON.stringify(cart),
      });

      if (!res.ok) {
        throw new Error('Sending cart data failed.');
      }

      dispatch(
        uiActions.showNotification({
          status: 'success',
          title: 'Success...',
          message: 'Sent cart data successfully.',
        })
      );
    };

    if (isInitial) {
      isInitial = false;
      return;
    }

    sendCartData().catch((error) => {
      dispatch(
        uiActions.showNotification({
          status: 'error',
          title: 'Error...',
          message: 'Sending cart data failed.',
        })
      );
    });
  }, [cart, dispatch]);

  return (
    <>
      {notification && (
        <Notification
          status={notification.status}
          title={notification.title}
          message={notification.message}
        />
      )}
      <Layout>
        {cartIsVisible && <Cart />}
        <Products />
      </Layout>
    </>
  );
}

export default App;

实现上来说如下：

在这里插入图片描述

这里的一些流程：

|- useEffect
|   |- sendCartData(async call)
|   |   |- multiple dispatches

这个就是比较直接的操作，即在 useEffect 中调用异步操作，并且在 thenable 中进行结果的处理（这里就是 redux 的触发）。

custom action creator

之前直接利用 redux toolkit 写的 action 如下：

在这里插入图片描述

这里就是在 slice 外写了一个 customer action creator，也就是一个 thunk。实现方式，就像是在 toolkit 出来之前就要手动写很多的 action 这种感觉。

thunk 的定义如下：

a function that delays an action until later

一个延迟触发 action 的函数

当然，thunk 之类的生态圈已经发展了很多年了（在 toolkit 之前就有了），比如说比较老牌的 Redux Thunk，相对而言比较新一些的 redux-saga，它们都已经在市面上运行的比较稳定，而且周下载量都很大：

在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/fc54633351ef4525afbc715d51d82df5

很多时候可以根据业务需求进行配置，比如说项目比较简单，又没有现成的脚手架，那么现成的 toolkit 的功能说不定就够了。如果业务需求比较复杂，那么可以考虑使用 thunk 或是 saga。

这里因为是对于购物车的操作，所以 custom action creator 会放在 cart slice 中：

import { createSlice } from '@reduxjs/toolkit';
import { uiActions } from './ui-slice';

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    items: [],
    totalQuantity: 0,
    totalAmount: 0,
  },
  reducers: {
    addItemToCart(state, action) {
      const newItem = action.payload;
      const existingItem = state.items.find((item) => item.id === newItem.id);
      state.totalQuantity++;
      if (!existingItem) {
        state.items.push({
          id: newItem.id,
          price: newItem.price,
          quantity: 1,
          total: newItem.price,
          title: newItem.title,
        });
        return;
      }

      existingItem.quantity++;
      existingItem.total += existingItem.price;
    },
    removeItemFromCart(state, action) {
      state.totalQuantity--;
      const id = action.payload;
      const existingItem = state.items.find((item) => item.id === id);
      if (existingItem.quantity === 1) {
        state.items = state.items.filter((item) => item.id !== id);
        return;
      }
      existingItem.quantity--;
      existingItem.total -= existingItem.price;
    },
  },
});

// custom action creator
export const sendCartData = (cart) => {
  return async (dispatch) => {
    dispatch(
      uiActions.showNotification({
        status: 'pending',
        title: 'sending',
        message: 'Sending cart data',
      })
    );

    const sendRequest = async () => {
      const res = await fetch('some api here', {
        method: 'PUT',
        body: JSON.stringify(cart),
      });

      if (!res.ok) {
        throw new Error('Sending cart data failed.');
      }
    };

    try {
      await sendRequest();
      dispatch(
        uiActions.showNotification({
          status: 'success',
          title: 'Success...',
          message: 'Sent cart data successfully.',
        })
      );
    } catch (e) {
      dispatch(
        uiActions.showNotification({
          status: 'error',
          title: 'Error...',
          message: 'Sending cart data failed.',
        })
      );
    }
  };
};

export const cartActions = cartSlice.actions;

export default cartSlice;

app.js 中的代码：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux';
import Cart from './components/Cart/Cart';
import Layout from './components/Layout/Layout';
import Products from './components/Shop/Products';
import Notification from './components/UI/Notification';
import { sendCartData } from './store/cart-slice';

let isInitial = true;

function App() {
  const dispatch = useDispatch();
  const { cartIsVisible, notification } = useSelector((state) => state.ui);
  const cart = useSelector((state) => state.cart);

  useEffect(() => {
    if (isInitial) {
      isInitial = false;
      return;
    }

    dispatch(sendCartData(cart));
  }, [cart, dispatch]);

  return (
    <>
      {notification && (
        <Notification
          status={notification.status}
          title={notification.title}
          message={notification.message}
        />
      )}
      <Layout>
        {cartIsVisible && <Cart />}
        <Products />
      </Layout>
    </>
  );
}

export default App;

可以看到，本质上来说，custom action creator 中的代码基本上就是将组件内部的代码移到了另一个地方进行中心化处理。这样的优点比较多，比如说 e-commerce 的项目来说，在每个商品详情页面中可以进行购物车的操作，也可以单独到购物车的页面进行操作，或是鼠标悬浮到购物车，都会弹出一个下拉框进行简单的操作等。

这样粗略一算就会有 3 个地方都会用到同样的 API 调用，同样的 UI 提示，这个情况下就可以考虑将这部分的代码封装到 custom action creator 中，减少重复代码。

React 状态管理工具 - Redux 学习笔记
爱玲姐姐的博客
12-28 1131
React 状态管理工具 - Redux 文章出处： 拉 勾 大前端 高薪训练营 1. Redux 核心 1.1 Redux 介绍 JavaScript 状态容器，提供可预测化的状态管理 1.2 Redux 核心概念及流程 Store: 存储状态的容器，JavaScript 对象 View: 视图，HTML页面 Actions: 对象，描述对状态进行怎样的操作 Reducers: 函数，操作状态并返回新的状态 1.3 Redux 使用： 计数器案例 <!DOCTYPE html> <h
如何处理React中的异步操作和副作用？
极客前端探索者的博客
06-24 480
选择哪种方法取决于你的具体需求、应用的复杂性、以及你对特定技术的熟悉程度。在React中，推荐使用Hooks，因为它们提供了更简洁和灵活的方式来处理状态和副作用。
初识react(四) react中异步解决方案之 redux-saga
weixin_34124939的博客
09-19 340
回顾 初识react(一) 揭开jsx语法和虚拟DOM面纱 初识react(二) 实现一个简版的html+redux.js的demo 初识react(三)在 react中使用redux来实现简版计数器 初识react(四) react中异步解决方案之 redux-saga 初识react(五) 数据流终极解决方案 dva(零配置) 今天demo是实现一个异步的计算器，探究redux-sag...
Redux Toolkit 快速入门指南：createSlice、configureStore、useSelector、useDispatch 全面解析
最新发布
hello！
06-09 1009
Redux Toolkit简化了传统Redux的复杂配置，提供四大核心工具：createSlice自动生成reducer和action，configureStore轻松创建store并整合模块，useSelector高效读取状态，useDispatch便捷派发action。其优势包括简洁API、安全状态管理、内置异步支持和开发工具，大幅提升开发效率，尤其适合React应用的状态管理。通过综合示例展示了从定义到使用的完整流程，是现代化Redux开发的首选方案。
redux副作用处理——redux-thunk
qq_43660897的博客
10-25 707
一、安装 yarn add redux-thunk // 或 npm install --save redux-thunk 二、使用 import { createStore, applyMiddleware } from "redux"; import * as loginActions from "./action/login"; import reducer from "./reducer"; import logger from "redux-logger"; import thunk from
一篇文章总结redux、react-redux、redux-saga
weixin_34109408的博客
05-19 428
不愿清醒，宁愿一直沉迷放纵。 不知归路，宁愿一世无悔追逐。 --- 王小波 本篇主要将react全家桶的产品非常精炼的提取了核心内容，精华程度堪比精油。各位大人，既然来了，客官您坐，来人，给客官看茶~~ redux 前言 首先，本篇文章要求您对js,react等知识有一定的了解，如果不曾了解，建议您先看一下：React精髓！一篇全概括(急速) React有props和state: ...
React Redux
ma33xiao的博客
03-13 1338
介绍 Flux是一种架构思想，专门解决软件的问题。它跟MVC架构是同一类东西，但是更加简单和清晰。 Redux最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树（state对象）保存着一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers），这样就可以进行数据追踪，实现时光旅行。 安装 npm i redux 一、redux介绍及设计和使用的三大原则 state以单一对象存储在state对象中 state只读（每次
:handbag:类似于Callbag RxJS的中间件，用于Redux中的异步副作用-React开发
05-27
在React开发中，异步副作用处理是至关重要的，特别是在使用Redux进行状态管理时。`reduxbag`是一个类似于RxJS的Callbag中间件，专为Redux设计，用于处理这些复杂的异步操作。Callbag是一种函数式反应式编程库，它...
react-redux-tutorial：面向初学者的React Redux教程的配套仓库
02-05
React Redux 是一个流行的JavaScript库，用于在React应用中管理和使用状态。它将Redux的状态管理容器与React组件库相结合，提供了一种高效且可预测的方式来处理应用程序的状态。本教程面向初学者，旨在帮助开发者...
react redux入门示例
08-27
React Redux是一个流行的前端状态管理框架，用于管理React应用程序中的状态。下面是React Redux入门示例的知识点总结： 一、环境准备 在使用React Redux之前，需要先准备好环境。这里使用create-react-app来搭建...
React-Redux中actions
m0_62785037的博客
03-08 461
在React-Redux中，actions是用于描述应用状态更改的对象，通过dispatch方法发送到store以触发相应的状态更新。
React学习——Redux（十四）
郊眠寺
06-11 358
上面使用redux-thunk可以看到，异步的请求操作全被放在了action里面去执行，这样让其功能不够纯粹，所以需要用到redux-saga，它可以将异步操作单独提取出去，让action只需要声明方法即可，这样更易于维护，逻辑也更精确。首先安装：。这个案例我也是用到了上面的服务端的代码，用来进行异步操作，代码和上面案例的一样，只需要开启服务器即可。来看一下reducer的代码：来看一下action方法： 下面就是saga相关的代码，在Store里面创建一个Saga文件夹，再在这个文件夹中创建一个文件，
React使用react-redux搭配redux流程和介绍详解
刻痕
03-02 1869
React使用react-redux搭配redux流程和介绍 简化处理方案
redux&react-redux入门总结
我们一起学前端
02-12 202
第一部分：redux 实战说明： ①创建store import {createStore} from 'redux' const store = createStore(); export default store; ②创建reducer const defaultState = { name:'lj', value:18 } export default (s...
React Redux 进阶: Hooks 版本用法 & Custom Context 局部 Store 实践
超悠閒的博客
08-29 809
React Redux 进阶: Hooks 版本用法 & Custom Context 局部 Store 实践 文章目录React Redux 进阶: Hooks 版本用法 & Custom Context 局部 Store 实践前言正文1. 在函数组件内消费 Redux 数据1.1 Redux 全局状态定义1.2 使用 Hooks 消费 Redux 数据2. Custom Context 实现局部 store2.1 HeaderStore 局部状态定义2.2 消费局部 store结语其他资
探索Redux应用程序中的redux-saga副作用模型
weixin_28746457的博客
10-29 965
本文还有配套的精品资源，点击获取 简介：Redux作为一个状态管理库，不直接处理副作用，但它通过中间件支持在应用中实现副作用逻辑。本文介绍了redux-saga，一种强大的中间件，它利用Generator函数的特性来管理复杂的异步逻辑和副作用。redux-saga通过提供一系列工具函数，如call、put、select和race，使得副作用的处理变得清晰、可测试，并易于与其...
redux副作用处理——redux-promise
qq_43660897的博客
10-26 773
一、安装 npm install --save redux-promise // 或 yarn add redux-promise 二、使用 import { createStore, applyMiddleware } from "redux"; import * as loginActions from "./action/login"; import reducer from "./reducer"; import logger from "redux-logger"; import promise
react-redux用法详解
溪
09-20 1341
一、相关依赖包 redux 路由是react全家桶【react+redux + router】中的一员，在项目中用于组件状态的管理，使组件传值通信更加方便，统一管理。Redux中文文档地址 http://cn.redux.js.org/ 下面我们看使用redux时相关的包。 主要是redux和react-redux这两个包 redux是redux状态管理的核心包提供了创建store、统一管理red...
React--》redux的传统写法与新技术redux toolkit的相柔并济——万言总结文章，你能学会多少。
ztK63LrD的博客
01-30 554
redux是一个专门用于做状态管理的JS库(不是react插件库)。它可以用在react、angular、vue等项目中，但基本与react配合使用。其作用是：集中式管理react应用中多个组件共享的状态。
提升React Redux异步能力：深入理解中间件
这样，当在store上调用dispatch时，实际上是触发了一系列中间件的执行，最终将异步操作的结果合并到action中，再由reducer处理，从而实现了真正的异步状态更新。 总结来说，Redux中间件是扩展和优化其功能的关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值