UI 未顯示 react redux 工具包應用程序中數組項的更改

Question

我正在使用 react-redux 工具包開發 ToDo 應用程序。我可以成功讀取/顯示、插入和刪除但不能更新，因為 UI 沒有顯示對待辦事項所做的更改，即使我看到Redux ToolsDev的更改。
我認為負責使用狀態數組顯示所有待辦事項的<ToDoList/>組件不會重新渲染，因為沒有檢測數組本身的變化，因為數組項 (todo) 是唯一更新的。
代碼：
toDoSlice

const initialState = {
  toDos: [
    { id: nanoid(), text: "First ToDo" },
    { id: nanoid(), text: "Second ToDo" },
  ],
  text: "",
};
const toDoSlice = createSlice({
  name: "toDo",
  initialState,
  reducers: {
    saveChanges: (state, action) => {
      state.toDos[action.payload].text = state.text;
      //  updating other state values...
    },
  },
});
export const selectToDos = (state) => state.todo.toDos;
export const selectText = (state) => state.todo.text;
export const selectEditStatus = (state) => state.todo.editStatus;
export const { saveChanges } = toDoSlice.actions;
export default toDoSlice.reducer;

<ToDoList/>從數組中顯示待辦事項

export default function ToDoList({ toDos }) {
  return (
    <form className="p-3" style={{ backgroundColor: "#F0E8E5" }}>
      <h2>List</h2>
      {toDos.map((todo) => (
        <ToDo key={todo.id} {...todo} />
      ))}
    </form>
  );
}

<ToDo/>使用 id 和文本顯示待辦事項

export default function ToDo({ id, text }) {
  const dispatch = useDispatch();
  return (
    <>
      <div className="input-group mt-3">
        <input type="text" className="form-control" defaultValue={text} />
        <button
          type="button"
          className="btn btn-warning"
          onClick={() => dispatch(editToDo(id))}
        >
          Update
        </button>
        <button
          type="button"
          className="btn btn-danger"
          onClick={() => dispatch(deleteTodo(id))}
        >
          Delete
        </button>
      </div>
    </>
  );
}

Answer 1

如果您在開發工具中看到組件更新但沒有重新渲染，那么問題很可能是存儲連接到ToDoList組件的方式。

這是一個 StackBlitz，顯示了所有連接在一起的代碼- 我創建了一個簡單的“主機”組件，它使用您的selectToDos選擇器將存儲連接到ToDoList -

function ToDoListHost() {
  const toDos = useSelector(selectToDos);

  return (
    <ToDoList toDos={toDos} />
  );
}

我還稍微更改了ToDo組件，以便通過在輸入字段中連接onChange事件來立即將每個更新傳播到商店：

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { editToDo, deleteToDo } from './store';

export default function ToDo({ id, text }) {
  const dispatch = useDispatch();

  const handleChange = event => 
    dispatch(editToDo({ id, text: event.target.value }));

  return (
    <>
      <div className="input-group mt-3">
        <input 
          type="text"
          className="form-control"
          value={text}
          onChange={handleChange} 
        />
        <button
          type="button"
          className="btn btn-danger"
          onClick={() => dispatch(deleteToDo(id))}
        >
          Delete
        </button>
      </div>
    </>
  );
}