一个仓库管理员在A界面扣减了某商品的库存，几乎在同一时刻，一个采购员在B界面看到了库存实时更新并触发了补货预警，而另一个订单处理员在C界面基于最新库存确认了一笔订单的最终状态——这三个操作必须共享同一份“真相”，任何延迟或不一致都可能导致超卖、库存积压或订单履约失败。这正是现代供应链前端面临的严峻挑战：如何构建一个

实时同步、高度一致、可追溯且高性能的全局状态流

。传统的状态管理方案在应对这类多端写操作、复杂业务逻辑与高实时性要求的场景时，往往显得力不从心。

本文将深入探讨如何利用 React 19 全新的 

 状态库，为你的供应链系统打造一个健壮、优雅且面向未来的状态管理中枢。

一、剖析库存与订单的状态特性与设计原则 

在动手之前，我们必须先厘清核心业务状态（库存、订单）的独特属性和由此衍生的架构原则。

由此，我们得出核心设计原则：

下面，我们用一张架构图来描绘我们将要构建的状态流全景。

图1：基于React Actions与Zustand的供应链状态流架构图。展示了从UI触发Action，到执行乐观更新、调用后端服务，最终更新Zustand Store并驱动UI更新的完整闭环。

二、基石：使用Zustand创建核心状态仓库 

Zustand以其极简的API、出色的性能和与React的深度集成脱颖而出，非常适合作为我们的状态容器。首先，我们创建库存与订单的核心Store。

），每个商品（SKU）在不同仓库中有详细库存信息。我们设计了支持乐观更新的结构。

import { create } from 'zustand';

/**
 * 库存状态管理仓库
 * 核心思想：
 * 1. 以`warehouseId`和`sku`为键，管理多维库存数据。
 * 2. 支持`optimisticData`用于乐观更新，提升UI响应速度。
 * 3. 统一管理`pendingOperations`，用于在异步操作失败时回滚。
 */
export const useInventoryStore = create((set, get) => ({
  // 状态结构定义
  warehouses: {
    // 'wh_001': { 'sku_123': { physical: 100, locked: 10, available: 90, version: 1 } }
  },
  // 乐观更新临时数据
  optimisticData: {},
  // 正在进行的操作队列，用于冲突处理与回滚
  pendingOperations: [],
  // 加载与错误状态
  isLoading: false,
  error: null,

  // Action: 初始化或批量更新库存
  updateInventoryFromAPI: (warehouseId, inventoryList) => {
    set((state) => {
      const newWarehouses = { ...state.warehouses };
      if (!newWarehouses[warehouseId]) {
        newWarehouses[warehouseId] = {};
      }
      inventoryList.forEach((item) => {
        newWarehouses[warehouseId][item.sku] = { ...item };
      });
      return { warehouses: newWarehouses };
    });
  },

  // Action: 乐观扣减库存 (核心)
  /**
   * 乐观更新库存，立即反映在UI上，并记录操作以待后续确认或回滚。
   * @param {string} warehouseId - 仓库ID
   * @param {string} sku - 商品SKU
   * @param {number} quantity - 扣减数量
   * @param {string} operationId - 此次操作的唯一ID，用于后续匹配
   */
  optimisticDeduct: (warehouseId, sku, quantity, operationId) => {
    const currentState = get();
    const currentStock = currentState.warehouses[warehouseId]?.[sku] || { physical: 0, locked: 0, available: 0, version: 0 };

    // 1. 计算乐观更新后的值
    const newLocked = currentStock.locked + quantity;
    const newAvailable = currentStock.available - quantity;

    // 2. 更新主状态（乐观部分）
    set((state) => {
      const newWarehouses = { ...state.warehouses };
      if (!newWarehouses[warehouseId]) newWarehouses[warehouseId] = {};
      newWarehouses[warehouseId][sku] = {
        ...currentStock,
        locked: newLocked,
        available: newAvailable,
      };
      return { warehouses: newWarehouses };
    });

    // 3. 将操作记录到pendingOperations，存储操作前的快照，用于可能的回滚
    set((state) => ({
      pendingOperations: [
        ...state.pendingOperations,
        {
          id: operationId,
          warehouseId,
          sku,
          previousState: { ...currentStock }, // 保存旧状态用于回滚
          type: 'deduct',
          quantity,
        },
      ],
    }));
  },

  // Action: 确认或回滚一个乐观操作
  /**
   * 根据后端API的响应结果，决定是确认乐观更新使其生效，还是回滚到之前的状态。
   * @param {string} operationId - 待处理的操作ID
   * @param {boolean} isSuccess - API调用是否成功
   * @param {Object} confirmedData - 成功后从服务端返回的权威数据（可选）
   */
  resolveOperation: (operationId, isSuccess, confirmedData) => {
    set((state) => {
      const opIndex = state.pendingOperations.findIndex(op => op.id === operationId);
      if (opIndex === -1) return state; // 操作已处理或不存在

      const operation = state.pendingOperations[opIndex];
      const { warehouseId, sku, previousState } = operation;
      const newWarehouses = { ...state.warehouses };
      const currentStock = newWarehouses[warehouseId]?.[sku];

      if (isSuccess && confirmedData) {
        // 成功：用服务端返回的权威数据更新状态
        newWarehouses[warehouseId][sku] = { ...confirmedData };
      } else if (!isSuccess) {
        // 失败：回滚到操作前的状态
        newWarehouses[warehouseId][sku] = { ...previousState };
      }
      // 无论成功失败，都从pendingOperations中移除该操作
      const newPendingOps = state.pendingOperations.filter((_, idx) => idx !== opIndex);

      return {
        warehouses: newWarehouses,
        pendingOperations: newPendingOps,
      };
    });
  },
}));

订单状态的管理更侧重于状态机的流转和列表的高效更新。

import { create } from 'zustand';

// 简单的订单状态机定义
export const ORDER_STATUS = {
  PENDING: 'pending',
  APPROVED: 'approved',
  PICKING: 'picking',
  SHIPPED: 'shipped',
  DELIVERED: 'delivered',
  CANCELLED: 'cancelled',
};
// 允许的状态流转映射
export const ALLOWED_TRANSITIONS = {
  [ORDER_STATUS.PENDING]: [ORDER_STATUS.APPROVED, ORDER_STATUS.CANCELLED],
  [ORDER_STATUS.APPROVED]: [ORDER_STATUS.PICKING, ORDER_STATUS.CANCELLED],
  [ORDER_STATUS.PICKING]: [ORDER_STATUS.SHIPPED],
  [ORDER_STATUS.SHIPPED]: [ORDER_STATUS.DELIVERED],
  // ... 其他
};

export const useOrderStore = create((set, get) => ({
  // 状态定义
  orders: {}, // { orderId: { id, status, items, createdAt, ... } }
  orderList: [], // 用于列表展示的ID数组，支持分页和排序
  selectedOrder: null,
  isLoading: false,
  error: null,

  // Action: 添加或更新订单
  upsertOrder: (orderData) => {
    set((state) => {
      const newOrders = { ...state.orders };
      newOrders[orderData.id] = { ...orderData };
      // 如果该订单ID不在列表中，则添加
      const newOrderList = state.orderList.includes(orderData.id) 
        ? state.orderList 
        : [...state.orderList, orderData.id];
      return { orders: newOrders, orderList: newOrderList };
    });
  },

  // Action: 批量更新订单（例如从列表接口返回）
  updateOrdersFromList: (ordersArray) => {
    const ordersMap = {};
    const orderIds = [];
    ordersArray.forEach(order => {
      ordersMap[order.id] = order;
      orderIds.push(order.id);
    });
    set({ orders: ordersMap, orderList: orderIds });
  },

  // Action: 更新单个订单状态 (状态机)
  updateOrderStatus: (orderId, newStatus) => {
    set((state) => {
      const order = state.orders[orderId];
      if (!order) return state;
      // 状态流转校验
      if (!ALLOWED_TRANSITIONS[order.status]?.includes(newStatus)) {
        console.warn(`Invalid status transition from ${order.status} to ${newStatus}`);
        return state;
      }
      const updatedOrders = { ...state.orders };
      updatedOrders[orderId] = { 
        ...order, 
        status: newStatus,
        updatedAt: new Date().toISOString(),
      };
      return { orders: updatedOrders };
    });
  },

  // 选择器等衍生状态
  getPendingOrders: () => {
    const state = get();
    return state.orderList
      .map(id => state.orders[id])
      .filter(order => order && order.status === ORDER_STATUS.PENDING);
  },
}));

三、纽带：使用 React 19 Server Actions 编排复杂状态流 

React 19 引入的 Server Actions 是一个范式转变。它允许我们在服务端（或同构环境下）定义“动作”函数，这些函数可以从客户端组件直接调用，并透明地处理网络请求、表单提交和

。它是连接UI意图与Zustand状态更新的完美桥梁。

3.1 定义库存扣减与订单创建的Action 

目录下创建这些Action。它们运行在服务端，但可以在客户端组件中像普通函数一样调用。

'use server'; // React 19 Server Actions 标识

import { revalidatePath } from 'next/cache'; // 如果是Next.js。普通React项目可忽略或使用路由器的invalidate。
// 注意：在纯客户端React应用中，`use server`指示这是一个“Server Action”，但它可能运行在Edge或Node环境。这里我们模拟其思想，将其作为副作用的统一入口。

/**
 * 扣减库存的Server Action。
 * 1. 接收来自客户端的参数。
 * 2. 执行乐观更新（通过导入的store）。
 * 3. 调用真实的后端API。
 * 4. 根据API结果，解析(confirm/rollback)乐观更新。
 * 5. 返回结果。
 */
export async function deductInventory(warehouseId, sku, quantity, orderId) {
  // 引入前端store。注意：在真实的RSC架构中，store的访问方式可能需要调整。
  const { optimisticDeduct, resolveOperation } = (await import('@/stores/inventoryStore')).useInventoryStore.getState();
  const { updateOrderStatus } = (await import('@/stores/orderStore')).useOrderStore.getState();

  // 生成唯一操作ID
  const operationId = `deduct_${warehouseId}_${sku}_${Date.now()}`;

  try {
    // --- 第1步：立即在前端进行乐观更新 ---
    optimisticDeduct(warehouseId, sku, quantity, operationId);

    // --- 第2步：调用后端API ---
    const response = await fetch('/api/inventory/deduct', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ warehouseId, sku, quantity, operationId, orderId }),
    });
    const result = await response.json();

    if (!response.ok) {
      throw new Error(result.message || '扣减库存失败');
    }

    // --- 第3步：API成功，确认乐观更新，并用服务端数据修正 ---
    resolveOperation(operationId, true, result.data.confirmedInventory);
    
    // --- 第4步：如果关联订单，更新订单状态为“已确认” ---
    if (orderId && result.data.orderUpdated) {
      updateOrderStatus(orderId, 'approved');
    }

    // 重新验证相关页面（Next.js场景）
    // revalidatePath('/dashboard/inventory');
    // revalidatePath(`/orders/${orderId}`);

    return { success: true, data: result.data };
  } catch (error) {
    console.error('扣减库存失败:', error);
    // --- 第5步：API失败，回滚乐观更新 ---
    resolveOperation(operationId, false);
    return { success: false, error: error.message };
  }
}

'use server';

export async function createSalesOrder(orderData) {
  const { optimisticDeduct, resolveOperation } = (await import('@/stores/inventoryStore')).useInventoryStore.getState();
  const { upsertOrder } = (await import('@/stores/orderStore')).useOrderStore.getState();

  const operationId = `order_${Date.now()}`;
  const temporaryOrderId = `temp_${operationId}`; // 生成临时订单ID

  try {
    // 1. 乐观更新：在UI中立即创建一个“临时”订单，并锁定库存
    const tempOrder = { id: temporaryOrderId, status: 'pending', ...orderData, isOptimistic: true };
    upsertOrder(tempOrder);
    orderData.items.forEach(item => {
      optimisticDeduct(item.warehouseId, item.sku, item.quantity, `${operationId}_${item.sku}`);
    });

    // 2. 调用创建订单API
    const response = await fetch('/api/orders', {
      method: 'POST',
      body: JSON.stringify(orderData),
    });
    const result = await response.json();

    if (!response.ok) throw new Error(result.message);

    // 3. 成功：用真实订单替换临时订单，并确认库存扣减
    const realOrder = result.data.order;
    upsertOrder(realOrder); // 替换临时订单
    orderData.items.forEach(item => {
      // 假设API返回了确认后的库存信息，这里简化处理
      resolveOperation(`${operationId}_${item.sku}`, true, result.data.inventorySnapshot[item.sku]);
    });

    return { success: true, order: realOrder };
  } catch (error) {
    // 4. 失败：移除临时订单，回滚所有库存扣减
    const { removeOrder } = (await import('@/stores/orderStore')).useOrderStore.getState();
    removeOrder(temporaryOrderId);
    orderData.items.forEach(item => {
      resolveOperation(`${operationId}_${item.sku}`, false);
    });
    return { success: false, error: error.message };
  }
}

订单状态的流转是供应链的核心逻辑，其状态机模型可以通过下图清晰展示：

图2：订单状态机流转图。展示了从“待审核”到“已完成”或“已取消”的标准业务流程，每个箭头代表一个允许的状态变更，通常由用户操作（如审核、发货）或系统事件（如超时取消）触发。

四、融合：在React组件中使用Action与Store 

最后，我们看看在UI组件中如何将它们优雅地结合。使用React 19的

（如果适用）来处理pending状态。

import React, { useState } from 'react';
import { useInventoryStore } from '@/stores/inventoryStore';
import { createSalesOrder } from '@/actions/orderActions'; // 导入Server Action

export default function OrderCreateForm() {
  const [isSubmitting, startTransition] = React.useTransition();
  const { warehouses } = useInventoryStore();
  const [formData, setFormData] = useState({ items: [{ sku: '', warehouseId: '', quantity: 1 }] });

  // 获取某个SKU在指定仓库的实时可用库存（来自Store）
  const getAvailableStock = (warehouseId, sku) => {
    return warehouses[warehouseId]?.[sku]?.available || 0;
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    // 使用startTransition包装，保持UI响应
    startTransition(async () => {
      const result = await createSalesOrder(formData);
      if (result.success) {
        alert(`订单创建成功! 订单号: ${result.order.id}`);
        // 表单重置...
      } else {
        alert(`创建失败: ${result.error}`);
        // 错误处理，表单中已锁定的库存会被自动回滚
      }
    });
  };

  const handleAddItem = () => {
    setFormData(prev => ({
      ...prev,
      items: [...prev.items, { sku: '', warehouseId: '', quantity: 1 }]
    }));
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>创建销售订单</h2>
      {formData.items.map((item, index) => (
        <div key={index} className="order-item">
          <input
            value={item.sku}
            onChange={(e) => {/* 更新formData逻辑 */}}
            placeholder="商品SKU"
          />
          <select
            value={item.warehouseId}
            onChange={(e) => {/* 更新formData逻辑 */}}
          >
            <option value="">选择仓库</option>
            {/* 动态填充仓库选项 */}
          </select>
          <input
            type="number"
            value={item.quantity}
            onChange={(e) => {/* 更新formData逻辑 */}}
          />
          {/* 实时显示可用库存，数据来自Zustand Store */}
          <span>
            可用库存: {getAvailableStock(item.warehouseId, item.sku)}
          </span>
        </div>
      ))}
      <button type="button" onClick={handleAddItem}>添加商品行</button>
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '提交中...' : '创建订单'}
      </button>
    </form>
  );
}

在电商供应链这样数据驱动、实时性要求极高的领域，状态管理不再是简单的“数据存取”，而是系统的

。通过本文的探讨，我们构建了一套基于 React 19 Actions 与 Zustand 的混合状态流架构：

的流程化与可追溯性作为首要目标，并确立了单一数据源、不可变数据、关注点分离等基本原则。

最终，我们得到了一个具备显著优势的解决方案

一个仓库管理员在A界面扣减了某商品的库存，几乎在同一时刻，一个采购员在B界面看到了库存实时更新并触发了补货预警，而另一个订单处理员在C界面基于最新库存确认了一笔订单的最终状态——这三个操作必须共享同一份“真相”，任何延迟或不一致都可能导致超卖、库存积压或订单履约失败。这正是现代供应链前端面临的严峻挑战：如何构建一个实时同步、高度一致、可追溯且高性能的全局状态流。传统的状态管理方案在应对这类多端写操作、复杂业务逻辑与高实时性要求的场景时，往往显得力不从心。

供应链架构与工程化篇 | 基于 React19 Actions 与 Zustand 设计全局库存与订单状态流

一个仓库管理员在A界面扣减了某商品的库存，几乎在同一时刻，一个采购员在B界面看到了库存实时更新并触发了补货预警，而另一个订单处理员在C界面基于最新库存确认了一笔订单的最终状态——这三个操作必须共享同一份“真相”，任何延迟或不一致都可能导致超卖、库存积压或订单履约失败。这正是现代供应链前端面临的严峻挑战：如何构建一个实时同步、高度一致、可追溯且高性能的全局状态流。传统的状态管理方案在应对这类多端写操

前端开发

编程语言

React19与Zustand结合打造供应链实时状态管理系统，解决多端并发操作、库存实时同步等难题。通过乐观更新、状态机流转等核心技术，实现强一致性、高性能的库存与订单管理，提升用户体验与系统健壮性。

数据完整性

对象存储

数据冗余

TypeScript

路由器

容器

路由

JSON

对象存储COS新用户低至1元！


2026采购季 | AI焕新·智启新局

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

供应链架构与工程化篇 | 基于 React19 Actions 与 Zustand 设计全局库存与订单状态流

供应链架构与工程化篇 | 基于 React19 Actions 与 Zustand 设计全局库存与订单状态流

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐