javascript - Redux:已成功调度操作，但未创建状态

Question

我只是在制作一个简单的应用程序来学习 Redux。我使用 Redux DevTools 来查看我的 2 个状态:列表和待办事项。但是它只显示待办事项，虽然我尝试了我知道的一切，但它不显示列表:
初始状态:

单击“添加”按钮后:

这是我的代码:
列表.js

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

const slice = createSlice({
  name: "lists",
  initialState: [],
  reducers: {
    listAdded: (lists, action) => {
      lists.push({
        id: action.payload.id,
        title: action.payload.title,
        todos: action.payload.todos,
      });
    },
  },
});

export const { listAdded } = slice.actions;
export default slice.reducer;

待办事项.js

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

const slice = createSlice({
  name: "todos",
  initialState: [],
  reducers: {
    todoAdded: (todos, action) => {
      todos.push({
        id: action.payload.id,
        content: action.payload.content,
        check: action.payload.check
      });
    },
    todoEdited: (todos, action) => {
      const index = todos.findIndex((todo) => todo.id === action.payload.id);
      todos[index].content = action.payload.content;
    }
  }
});

export const { todoAdded, todoEdited } = slice.actions;
export default slice.reducer;

reducer .js

import { combineReducers } from "redux";
import todosReducer from "./todos";
import listsReducer from "./lists";

export default combineReducers({
  lists: listsReducer,
  todos: todosReducer
});

配置Store.js

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

const store = () => {
  return configureStore({ reducer });
};

export default store();

索引.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./configureStore";
import { Provider } from "react-redux";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

所以如你所见，它在我使用 dispatch 之后采取行动。但是，因为它没有状态，所以当我使用 list.map 时，它会显示“类型错误:无法读取未定义的属性 'map'”
请问我做错了什么？请帮忙!我很感激!
编辑:放置更多与添加按钮相关的代码:
应用程序.js

import React from "react";
import ItemTodo from "./ItemTodo";
import ItemList from "./ItemList";
import { useSelector } from "react-redux";
import NewListButton from "./NewListButton";
import NewTodoButton from "./NewTodoButton";

function App() {
  const todos = useSelector((state) => state.todos);
  const lists = useSelector((state) => state.lists);
  return (
    <div className="App">
      <div className="todo-list">
        <NewListButton />
        <div>
          {lists.map((item) => (
            <ItemList key={item.id} title={item.title} />
          ))}
        </div>
        <div>
          <h2>write a todo</h2>
          {todos.map((item) => (
            <ItemTodo
              key={item.id}
              id={item.id}
              content={item.content}
              check={item.check}
            />
          ))}
          <NewTodoButton />
        </div>
      </div>
    </div>
  );
}

export default App;

项目列表.js

import React from "react";

const ItemList = ({ title }) => {
  return (
    <div className="list-item">
      <h2>{title}</h2>
      <div className="list-edit">edit name</div>
      <div className="list-remove">remove list</div>
    </div>
  );
};

export default ItemList;

ItemTodo.js

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { todoEdited } from "./todos";

const ItemTodo = ({ id, content, check }) => {
  const dispatch = useDispatch();
  const [contentX, setContentX] = useState("");
  const inputTodo = (e) => {
    setContentX(e.target.value);
  };
  const clickEdit = (e) => {
    e.preventDefault();
    dispatch(todoEdited({ id, content: contentX }));
  };
  return (
    <div>
      <form className="nav-submit">
        <input
          type="text"
          onClick={inputTodo}
          onChange={inputTodo}
          value={contentX}
          onBlur={clickEdit}
        />
      </form>
    </div>
  );
};

export default ItemTodo;

新建列表按钮.js

import { listAdded } from "./lists";
import { v4 as uuidv4 } from "uuid";
import { useDispatch } from "react-redux";
import React, { useState } from "react";

const NewListButton = () => {
  const dispatch = useDispatch();
  const [titleX, setTitleX] = useState("");
  const getListTitle = (e) => {
    setTitleX(e.target.value);
  };
  const setNewList = (e) => {
    e.preventDefault();
    const id = uuidv4();
    dispatch(listAdded({ id, title: titleX, todos: [] }));
    setTitleX("");
  };
  return (
    <div className="nav-list">
      <h2>write a list</h2>
      <form action="">
        <input type="text" onChange={getListTitle} value={titleX} />
        <button className="button-newlist" onClick={setNewList}>
          New List
        </button>
      </form>
    </div>
  );
};

export default NewListButton;

新建TodoButton.js

import React from "react";
import { v4 as uuidv4 } from "uuid";
import { useDispatch } from "react-redux";
import { todoAdded } from "./todos";

const NewTodoButton = () => {
  const id = uuidv4();
  const dispatch = useDispatch();
  const newTodo = (e) => {
    e.preventDefault();
    dispatch(todoAdded({ id, content: "", check: true }));
  };
  return (
    <div>
      <button className="button-new" onClick={newTodo}>
        New Todo
      </button>
    </div>
  );
};

export default NewTodoButton;

编辑:更多信息。
这里有一些奇怪的事情:
我添加了一个文件:ListInitialState.js

const ListInitialState = [
  {
    id: 1,
    title: "first list",
    todos: [],
  },
];

export default ListInitialState;

然后将 ListInialState.js 导入到 list.js:

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

const slice = createSlice({
  name: "lists",
  initialState: ListInitialState,
  reducers: {
    listAdded: (lists, action) => {
      lists.push({
        id: action.payload.id,
        title: action.payload.title,
        todos: action.payload.todos,
      });
    },
  },
});

export const { listAdded } = slice.actions;
export default slice.reducer;

最后它奏效了，但我不知道为什么:

如果有人解释它会很棒。对此，我真的非常感激!

Answer 1

可能您没有启用 redux 开发工具。
您可以使用此配置启用 redux 开发工具。

const store = configureStore({
  reducer,
  devTools: process.env.NODE_ENV !== 'production',
})

The Redux DevTools Extension is disabled for production