如何用React和Redux独立管理动态添加组件的状态？

问题根源 #

你当前的Redux结构把parent和child的状态设计成了全局单一实例：所有Parent组件共用同一个parent.children数组，所有Child组件共用同一个child.text值，这就导致添加子组件或输入文本时，所有实例同步变化。

解决方案：重构Redux状态结构 #

要独立管理每个父组件的状态，需要把状态设计成层级化结构，让每个父实例拥有自己的子集合，每个子实例拥有独立的文本。

1. 重构appSlice的状态结构 #

把父组件和子组件的状态都整合到appSlice中，每个父对象包含自身ID和子组件列表：

// appSlice.js
import { v4 as uuid } from "uuid";
import { createSlice } from "@reduxjs/toolkit";

const appSlice = createSlice({
  name: "app",
  initialState: {
    parents: []
  },
  reducers: {
    // 添加父组件：生成ID，初始化空的子组件列表
    addParent: (state) => {
      state.parents.push({
        id: uuid(),
        children: []
      });
    },
    // 给指定父组件添加子组件：接收parentId，生成子ID和空文本
    addChild: (state, { payload: parentId }) => {
      const parent = state.parents.find(p => p.id === parentId);
      if (parent) {
        parent.children.push({
          id: uuid(),
          text: ""
        });
      }
    },
    // 更新指定子组件的文本：接收parentId、childId和新文本
    updateChildText: (state, { payload: { parentId, childId, text } }) => {
      const parent = state.parents.find(p => p.id === parentId);
      if (parent) {
        const child = parent.children.find(c => c.id === childId);
        if (child) {
          child.text = text;
        }
      }
    },
  },
});

export const { addParent, addChild, updateChildText } = appSlice.actions;
export default appSlice.reducer;

2. 简化store配置 #

现在不需要单独的parentSlice和childSlice了，store只保留app reducer：

// store/store.js
import { configureStore } from "@reduxjs/toolkit";
import appReducer from "../appSlice";

export const store = configureStore({
  reducer: {
    app: appReducer
  },
});

3. 修改Parent组件 #

接收parentId作为props，根据ID获取自己的子组件列表，dispatch时传递parentId，同时实现打印子信息功能：

// components/Parent.jsx
import React from 'react'
import Child from './Child'
import { useDispatch, useSelector } from "react-redux"
import { addChild } from "../appSlice"

export default function Parent({ parentId }) {
  const dispatch = useDispatch()
  // 根据parentId筛选当前父组件的子列表
  const parent = useSelector(state => state.app.parents.find(p => p.id === parentId))
  const children = parent?.children || []

  // 打印子信息：遍历当前父组件的所有子文本
  const printChildInfo = () => {
    const childTexts = children.map(child => child.text).filter(Boolean);
    console.log(`父组件${parentId}的子信息：`, childTexts);
  }

  return (
    <div style={{
      width: "100%",
      border: "1px solid black",
      padding: "1rem",
      marginBottom: "10px",
    }}>
      <button onClick={() => dispatch(addChild(parentId))}>Add new child</button>
      <div style={{ margin: '1rem 0' }}>
        {children.map(child => (
          <Child key={child.id} parentId={parentId} childId={child.id} />
        ))}
      </div>
      <button onClick={printChildInfo}>Print child info</button>
    </div>
  )
}

4. 修改Child组件 #

接收parentId和childId作为props，dispatch时传递这两个ID和输入文本，同时回显当前子组件的文本：

// components/Child.jsx
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { updateChildText } from '../appSlice';

export default function Child({ parentId, childId }) {
  const dispatch = useDispatch();
  // 获取当前子组件的文本值，用于输入框回显
  const childText = useSelector(state => {
    const parent = state.app.parents.find(p => p.id === parentId);
    return parent?.children.find(c => c.id === childId)?.text || "";
  })

  return (
    <div style={{ margin: '0.5rem 0' }}>
      <input 
        type='text' 
        value={childText}
        onChange={(event) => dispatch(updateChildText({
          parentId,
          childId,
          text: event.target.value
        }))}
      />
    </div>
  )
}

5. 调整App组件 #

传递parentId给每个Parent实例：

// App.jsx
import { useDispatch, useSelector } from "react-redux"
import { addParent } from "./appSlice"
import Parent from "./components/Parent";

export default function App() {
  const dispatch = useDispatch();
  const { parents } = useSelector(state => state.app)

  return (
    <div style={{
      display: 'flex', 
      justifyContent: 'center', 
      flexDirection: 'column',
      margin: '2rem'
      }}>
      <button onClick={() => dispatch(addParent())}>Add parent</button>
      <br />
      {parents.map((parent) => (
        <Parent key={parent.id} parentId={parent.id}/>
      ))}
    </div>
  )
}

要不要用Redux？ #

如果这些父子组件的状态不需要在组件树的其他地方共享（比如不需要在App、Header等非父子组件中访问子文本），那么完全可以用React本地状态管理，代码会更简洁：

• 在App中用useState存储parents数组
• Parent组件用useState存储自己的children数组
• 这种方式不需要Redux，适合组件内部状态的场景

只有当状态需要跨多个不相关组件共享、或者需要持久化、或者有复杂的状态更新逻辑时，才推荐用Redux。

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