如何使用切片缩减器设置初始切片状态答案

【问题标题】：How to set initial slice state using slice reducer如何使用切片缩减器设置初始切片状态
【发布时间】：2023-04-01 04:22:01
【问题描述】：

所以，我有一个redux slice，里面有两个reducer，setTodos和addTodo，初始状态设置为空，但是很快用reducer更新了setTodos，@的数据987654324@（从组件调度）是通过网络调用获取的，所以它是一个异步任务。数据已正确更新，但是当我尝试添加新的待办事项时，添加的内容不会像应有的那样反映在屏幕上，也许它仅在重新加载时显示，因为再次执行 setTodos 并相应地更新状态。

const myTodoSlice = createSlice({
  name:'Todo',
  initialState:{todos:[]},
  reducers:{
     addTodo:(state,action)=>{
          state.todos.push(action.payload.todo)
     },
     setTodos:(state,action)=>{
          //Approach 1 of setting the initial todo state.
          state.todos = action.payload.arrayOfTodos
          
          //Approach 2 of setting the initial todo state.
          // state.todos.push(...action.payload.arrayOfTodos)
     }
}

列表渲染代码：

const selector  = useSelector((arg:RootStateOrAny)=>arg.todos.todos)
return(
 <React.Fragment>
   {selector?.map((item:RootStateOrAny) => <TodoItem key={Math.random()} title={item.todoTitle} desc={item.todoDescription} />)}
 </React.Fragmnet>
)

目前，我正在遵循方法 1，但这样做，我无法在屏幕上呈现新添加的内容。当我尝试使用方法 2 时，我遇到的错误主要与超出的重新渲染深度有关。我想通过以下方法 1 知道，为什么没有呈现添加，以及我可以进行哪些更改以获得所需的结果？谢谢。

【问题讨论】：

标签： reactjs typescript react-redux

【解决方案1】：

问题在于 React 看到相同的数组引用（因为 push 是现有数组实例的变异操作）并忽略渲染。而不是

     addTodo:(state,action)=>{
          state.todos.push(action.payload.todo)
     },

尝试像下面这样创建一个新的数组实例并添加新的 todo 项（concat 返回一个带有新项的新数组，而不改变现有的项）。

     addTodo:(state,action)=>{
          state.todos = state.todos.concat([action.payload.todo])
     },

【讨论】：

@Prajwal Kulkarni，看看这个！！
我确实尝试过类似的方法，我尝试过state.todos = [...state.todos,action.payload.todo]，但没有奏效，我也按照您的建议尝试使用concat 方法，它仍然无法正常工作。
另外，即使我们使用类似突变的语法，redux 是否在底层使用 Immer 来管理状态重建？
能否分享一下todo list渲染的代码。如果你能创建一个代码沙箱就更好了 => codesandbox.io/s/new.
为了掌握我使用useSelector钩子的状态，然后映射到useSelector钩子的实例。我已经添加了列表渲染的代码，请检查。