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

我只是在做一个简单的应用程序来学习Redux。我使用Redux开发工具查看我的两种状态：列表和待办事项。但是，它只显示待办事项，尽管我尝试了我所知道的一切，但它不显示列表：

初始状态：

单击“添加”按钮后：

这是我的密码：

lists.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;

todos.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
});

configureStore.js

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

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

export default store();

index.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")
);

然后将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;

最后它成功了，但我不知道为什么：

---

如果有人解释一下就好了。我真的很感激

可能您没有启用redux开发工具

可以使用此配置启用redux开发工具

const store=configureStore({
减速器，
devTools:process.env.NODE_env！=“生产”，
})

已为生产禁用Redux DevTools扩展

---

嗨，谢谢！我在configureStore.js中尝试了您的代码，然后是“导出默认存储”；但它与以前一样？他的todo reducer的状态显示出来了，所以可能不是因为devtools没有connected@Ashu对问题是操作已成功调度，但状态从未创建。正如我前面提到的，您缺少初始状态，因此在您调度操作之前，它不会显示，redux在开始时运行每个reducer，这些reducer返回存储在存储中的初始状态。但我看到在CreateSicle中，您确实传递了一个空数组。您的listsReducer是否具有默认状态？你能把它添加到问题中吗？@Ashu对不起，你这是什么意思？如何将其状态设置为默认状态？放置一些与添加按钮和触发减速器相关的代码？@Kalhan.Toress抱歉，我认为这些代码足以获取状态。增加了更多的代码。谢谢

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;

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;

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;

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;

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

export default ListInitialState;

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;