react redux 工具包无法为 addtoprogress 编写逻辑

Question

我很难获得 handson redux 工具包 我在这里尝试将任务从待办事项转移到进行中 addtodo 工作正常但 addprogress 不工作 有人可以帮我吗？我是新手

商店.js

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

import counterReducer from "./features/counter/counterSlice";
import todoReducer from "./features/todo/todosSlice";
import progressReducer from './features/inProgress/inProgressSlice'
const store = configureStore({
  reducer: {
    // counter: counterReducer,
    todos: todoReducer,
    progress :progressReducer
  },
});

export default store;

todo.js 中的按钮

<button
  onClick={() => {
       dispatch(addProgress(todo.id))
      }}
     >

在 todo.js 中，我有一个 id，我将其作为有效负载传递

progress.js

import React from "react";
import { useSelector } from "react-redux";

const InProgress = () => {
  const progress = useSelector((state) => state.progress);
  if (!progress) {
    console.log("Loading");
  }
console.log(progress.length);

  return (
    <div>
      <div>
        <h2>In Progress</h2>
        <ul>
          {progress.map((item) => (
            <li key={item.id}>{item.text}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default InProgress;

progressslice.js

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

const progressSlice = createSlice({
  name: "progress",
  initialState: [],
  reducers: {
    addProgress: (state, action) => {
      const todoIndex = state.findIndex((todo) => todo.id === action.payload);
      console.log(todoIndex);
      if (todoIndex !== -1) {
        const todo = state[todoIndex];
        const newState = [
          ...state.slice(0, todoIndex),
          ...state.slice(todoIndex + 1),
          todo,
        ];
        console.log("Current State: ", state);
        console.log("New State: ", newState);
        return newState;
      }
    },
  },
});

export const { addProgress } = progressSlice.actions;
export default progressSlice.reducer;

这里，如果 id 与状态 id 匹配，我需要将其添加到进度状态中，以及之前无法实现的状态

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

const todosSlice = createSlice({
  name: "todos",
  initialState: [
  ],
  reducers: {
    addTodo: (state, action) => {
      state.push({
        id:111,
        text: action.payload,
      });
    },
    toggleTodo: (state, action) => {
      const todo = state.find((todo) => todo.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
  },
});

export const { addTodo, toggleTodo } = todosSlice.actions;
export default todosSlice.reducer;

todoslice.js 工作正常