React+Redux Todo应用报错：Cannot read properties of undefined (reading 'list')

错误原因 #

你在store.js中注册reducer时用的键名是todo，但在切片的selectTodos选择器里，却试图访问state.todos.list。Redux store的状态结构里根本不存在todos这个属性，所以会触发Cannot read properties of undefined (reading 'list')的错误。

解决建议 #

以下两种方案任选其一即可：

方案一：修改Store中的Reducer键名（推荐） #

把store.js里的reducer键名从todo改成todos，和切片的name字段保持一致，让选择器的访问路径匹配store的状态结构：

// store.js 修改后
import { configureStore } from "@reduxjs/toolkit";
import todosReducer from "../features/todos/todosSlice";

export const store = configureStore({
  reducer: {
    todos: todosReducer, // 将todo改为todos
  },
});

方案二：修改选择器的访问路径 #

如果不想改动store的结构，就调整切片里selectTodos的访问路径，对应store里的键名：

// todosSlice.js 修改后
export const selectTodos = (state) => state.todo.list; // 将todos改为todo

额外提示：App组件里直接渲染todos数组会以字符串形式输出内容，建议改成遍历渲染单个todo项，比如：

// App.jsx 中todo渲染部分替换为
{todos.map((todo, index) => (
  <div key={index}>{todo}</div>
))}

内容的提问来源于stack exchange，提问作者Shadq