Question

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

初始状态：

点击“添加”按钮后：

这是我的代码：

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

如您所见，它在我使用 dispatch 后执行操作。但是，因为它没有 state，当我使用 lists.map 时，它说 'TypeError: Cannot read property 'map' of undefined'< /em>

请问我做错了什么？请帮忙！我很感激！

编辑：添加更多与添加按钮相关的代码：

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

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

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

NewTodoButton.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',
})

<块引用>

Redux DevTools 扩展已禁用生产

Redux：已成功分派操作，但未创建状态

1 个答案: