在 createEntityAdapter 中使用 redux 工具包的 globalSelectors、simpleSelectors 时，无法读取未定义的属性（读取 'ids'）

Question

我正在学习 Redux 工具包并将 createEntityAdapter 用于一个简单的待办事项应用程序。问题是，每当我尝试从 globalselectors or/and todoAdapter 的简单选择器访问待办事项时，我都会收到错误消息。

我为此创建了一个CodeSandBox

这是我设置的todoReducer代码


const todosAdapter = createEntityAdapter({
  selectId: (todo) => todo._id,
});

const initialState = {
  fetching: true,
  error: null,
  addingNew: false,
};

const todosSlice = createSlice({
  name: 'todos',
  initialState: todosAdapter.getInitialState(initialState),
  reducers: {
    pushNewTodo: todosAdapter.addOne,
    addManyTodos: todosAdapter.addMany,
    removeTodo: todosAdapter.removeOne,
    editTodo: todosAdapter.updateOne,
  },
  extraReducers: { ... }
})

//* Errror in this line , 
export const globalTodosReducers = todosAdapter.getSelectors((st) => st.todos);
export const simpleTodosReducers = todosAdapter.getSelectors();

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

当我想使用 simpleSelectors 时，我也遇到了错误

// TodoApp.js
function TodoApp() {
  .
  .
  .
  // * Error in these lines
  // const todos = globalTodosReducers.selectAll();
  const todos = simpleTodosReducers.selectAll();


.
.
.

错误是

Cannot read properties of undefined (reading 'ids')

Answer 1

getSelectors返回的对象包含很多selector函数。每个都要求您传入状态对象，其中包含您想要 select 来自的数据。你的想法是对的：

todosAdapter.getSelectors((st) => st.todos)

这告诉实体适配器访问传递给 selector 函数的任何对象的 todos 属性，以便获取适配器管理的数据。

当您调用 selector 时，传入应用程序的根状态：

const todos = globalTodosReducers.selectAll(store.getState());

在 React 的上下文中，react-redux 的 useSelector 函数将为您完成此操作：

const todos = useSelector(globalTodosReducers.selectAll);

在 createEntityAdapter 中使用 redux 工具包的 globalSelectors、simpleSelectors 时，无法读取未定义的属性（读取 'ids'）

Cannot read properties of undefined (reading 'ids') , while using globalSelectors,simpleSelectors of redux toolkit in createEntityAdapter

reactjs

redux

mern

redux-toolkit