React Redux中存储对象数组的方法及createSlice配置咨询

一、设置初始状态 #

要在Redux Store中存储对象数组，createSlice的initialState直接设为**空数组[]**即可；如果有默认初始化数据，也可以直接传入对应的对象数组。

比如你的数据是包含id、title、body字段的文章列表，初始状态可以这样写：

const initialState = [];
// 或者带默认数据
// const initialState = [
//   { id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" }
// ];

二、编写对应的Reducer #

针对对象数组的常见操作，在reducers中定义对应的处理函数即可，下面是完整的createSlice示例：

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

const postsSlice = createSlice({
  name: 'posts',
  initialState: [], // 初始状态为对象数组
  reducers: {
    // 添加单个对象
    addPost: (state, action) => {
      // Redux Toolkit允许直接修改state（内部会做Immutable处理）
      state.push(action.payload);
    },
    // 批量添加对象（比如加载接口数据）
    addPosts: (state, action) => {
      state.push(...action.payload);
    },
    // 根据id更新对象
    updatePost: (state, action) => {
      const targetIndex = state.findIndex(post => post.id === action.payload.id);
      if (targetIndex !== -1) {
        state[targetIndex] = { ...state[targetIndex], ...action.payload };
      }
    },
    // 根据id删除对象
    deletePost: (state, action) => {
      return state.filter(post => post.id !== action.payload);
    }
  }
});

// 导出action creators
export const { addPost, addPosts, updatePost, deletePost } = postsSlice.actions;

// 导出reducer
export default postsSlice.reducer;

三、关键说明 #

• Redux Toolkit的createSlice内部集成了Immer，所以你可以直接对state做可变操作（比如push、修改数组元素），无需手动返回新数组（当然返回新数组也支持，比如deletePost里的filter写法）。
• 每个reducer的action.payload就是你传入的操作数据：
  • 调用addPost时，传入单个文章对象；
  • 调用addPosts时，传入文章对象数组；
  • 调用updatePost时，传入包含id和要更新字段的对象；
  • 调用deletePost时，传入要删除的文章id。

四、组件中使用示例 #

比如从接口获取数据后，分发action更新Store：

import { useDispatch } from 'react-redux';
import { addPosts } from './postsSlice';

// 假设从API获取到的文章数组
const fetchedPosts = [
  { id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" },
  { id: 2, title: "qui est esse", body: "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla" }
];

const dispatch = useDispatch();
dispatch(addPosts(fetchedPosts));

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