Redux 動作觸發兩次

Question

我有這個 redux 待辦事項應用程序，它根據未完成任務的數量更新剩余任務的 state。

該應用程序正常運行，沒有任何錯誤或問題，但是當我添加任務、切換完成和刪除任務時， remainingTasks/updateRemainingTasks的操作類型會觸發兩次：

有趣的是，該操作僅在刪除已完成的任務時觸發一次：

這些是該切片及其相應組件的代碼：

片

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

const remainingTasksSlice = createSlice({
  name: "remainingTasks",
  initialState: 0,
  reducers: {
    updateRemainingTasks: (state, action) => {
      return action.payload;
    },
  },
});

// Selectors
export const selectRemainingTasksSlice = (state) => state.remainingTasksReducer;

// Actions
export const { updateRemainingTasks } = remainingTasksSlice.actions;

// Reducers
export default remainingTasksSlice.reducer;

零件

import { useSelector, useDispatch } from "react-redux";
import {
  selectRemainingTasksSlice,
  updateRemainingTasks,
} from "./remainingTasksSlice";
import { selectTaskSlice } from "../task/taskSlice";

const RemainingTasks = () => {
  const dispatch = useDispatch();
  const remainingTasksSlice = useSelector(selectRemainingTasksSlice);
  const taskSlice = useSelector(selectTaskSlice);

  // Number of Incomplete Tasks
  const incompleteTasks = taskSlice.filter((task) => !task.completed).length;

  // Update the State of the Remaining Tasks
  dispatch(updateRemainingTasks(incompleteTasks));

  return (
    <div>
      <h1 className="header">
        {remainingTasksSlice > 1
          ? `${remainingTasksSlice} Tasks Left`
          : `${remainingTasksSlice} Task Left`}
      </h1>
    </div>
  );
};

export default RemainingTasks;

我想知道這是正常現象還是我的代碼沒有得到很好的優化。

Answer 1

我認為您必須將調度調用到 useEffect 掛鈎中：

....
useEffect(()=>{
    // Number of Incomplete Tasks
    const incompleteTasks = taskSlice.filter((task) => !task.completed).length;
    // Update the State of the Remaining Tasks
    dispatch(updateRemainingTasks(incompleteTasks));
}, [taskSlice]);
....

否則每次渲染組件時都會調用調度。