React/Redux中为列表单个Item设置加载Spinner的最佳实践

嗨，这个场景我太熟悉了！之前刚用Redux的时候也踩过全局加载状态的坑，咱们来聊聊正确的做法，以及为什么你之前传组件实例的方案不太合适~

先说说为什么传组件实例到reducer不是最佳实践 #

Redux的核心原则之一是reducer必须是纯函数——它只能接收state和action，返回新的state，不能有任何副作用，也不能直接修改外部对象（比如你的组件实例）。把组件实例传到reducer里：

• 会破坏单向数据流的规则，让状态管理和组件耦合在一起，后续维护、测试都会变得麻烦；
• 组件实例是不稳定的，比如组件重新渲染、卸载后，实例可能会变化，容易导致奇怪的bug；
• 违背了Redux“状态集中管理”的初衷，把状态分散到了组件实例上，失去了Redux的优势。

正确的两种方案，按需选择 #

方案一：在Redux Store中为每个Item维护独立的加载状态 #

如果这个加载状态需要被其他组件共享（比如父组件要根据某个Item的加载状态做逻辑），那推荐把状态放到全局Store里，和每个Item的ID绑定。

步骤1：调整Store中Items的结构

把原来的数组结构改成以Item ID为键的对象，或者每个Item对象里包含isFetching字段：

// Store初始状态示例
const initialState = {
  items: {
    1: { id: 1, name: "Item 1", content: "...", isFetching: false },
    2: { id: 2, name: "Item 2", content: "...", isFetching: false }
  }
};

步骤2：编写带Item ID的Action

在更新请求的action里带上对应的Item ID，让Reducer知道要更新哪个Item的状态：

export const updateItem = (itemId, updatedData) => async dispatch => {
  // 发起请求时，标记该Item为加载中
  dispatch({ type: 'UPDATE_ITEM_REQUEST', payload: { itemId } });
  try {
    const response = await api.put(`/items/${itemId}`, updatedData);
    // 请求成功，更新数据并取消加载状态
    dispatch({ 
      type: 'UPDATE_ITEM_SUCCESS', 
      payload: { itemId, data: response.data } 
    });
  } catch (error) {
    // 请求失败，取消加载状态并记录错误
    dispatch({ 
      type: 'UPDATE_ITEM_FAILURE', 
      payload: { itemId, error: error.message } 
    });
  }
};

步骤3：Reducer中处理对应Item的状态

只更新目标Item的isFetching字段，其他Item不受影响：

const itemsReducer = (state = initialState.items, action) => {
  switch (action.type) {
    case 'UPDATE_ITEM_REQUEST':
      return {
        ...state,
        [action.payload.itemId]: {
          ...state[action.payload.itemId],
          isFetching: true
        }
      };
    case 'UPDATE_ITEM_SUCCESS':
      return {
        ...state,
        [action.payload.itemId]: {
          ...state[action.payload.itemId],
          ...action.payload.data,
          isFetching: false
        }
      };
    case 'UPDATE_ITEM_FAILURE':
      return {
        ...state,
        [action.payload.itemId]: {
          ...state[action.payload.itemId],
          isFetching: false,
          error: action.payload.error
        }
      };
    default:
      return state;
  }
};

步骤4：Item组件中获取对应状态

通过Item ID从Store里拿到该Item的isFetching状态，条件渲染Spinner：

import { connect } from 'react-redux';
import { updateItem } from '../actions';
import Spinner from './Spinner';

const Item = ({ item, updateItem }) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    // 获取表单数据
    const formData = { /* 表单输入值 */ };
    updateItem(item.id, formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={item.name} 
        onChange={(e) => {/* 处理输入变化，如果是受控组件的话 */}} 
      />
      {/* 其他表单字段 */}
      
      {item.isFetching && <Spinner />}
      <button type="submit" disabled={item.isFetching}>
        {item.isFetching ? '保存中...' : '保存'}
      </button>
    </form>
  );
};

const mapStateToProps = (state, ownProps) => ({
  item: state.items[ownProps.itemId]
});

export default connect(mapStateToProps, { updateItem })(Item);

方案二：用组件内部State管理加载状态 #

如果这个加载状态只是当前Item组件自己使用，不需要全局共享，那完全可以把状态放到组件内部，这样更简单、轻量，也符合React“局部状态局部管理”的原则。

import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { updateItem } from '../actions';
import Spinner from './Spinner';

const Item = ({ item }) => {
  const dispatch = useDispatch();
  const [isFetching, setIsFetching] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = { /* 表单输入值 */ };
    
    setIsFetching(true);
    try {
      // 注意：updateItem要返回Promise（async/await默认返回）
      await dispatch(updateItem(item.id, formData));
    } catch (error) {
      // 这里可以处理错误，比如提示用户
      console.error('更新失败:', error);
    } finally {
      // 不管成功失败，都关闭加载状态
      setIsFetching(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={item.name} 
        onChange={(e) => {/* 处理输入变化 */}} 
      />
      {/* 其他表单字段 */}
      
      {isFetching && <Spinner />}
      <button type="submit" disabled={isFetching}>
        {isFetching ? '保存中...' : '保存'}
      </button>
    </form>
  );
};

export default Item;

总结一下 #

• 如果加载状态需要全局共享（比如其他组件要用到），选方案一，把状态和Item ID绑定放到Redux Store里；
• 如果只是当前组件用，选方案二，用组件内部State更简单直接。

这两种方案都符合Redux和React的最佳实践，比传组件实例的方式更健壮、易维护~

内容的提问来源于stack exchange，提问作者user2410424