如果命名不正确，Redux 选择器函数 returns 会出错

Question

我的 redux todo 应用程序中有这个选择器：

export const selectTodoSlice = (state) => state.todoReducer;

而且我必须按照我在商店中定义我的减速器的方式来命名这个 state.todoReducer：

import todoReducer from "../features/todo/todoSlice";
const store = configureStore({
  reducer: {
    todoReducer,
  },
});

...否则我会得到关于某些 .map() 函数的错误。

所以我想知道这是否是一个约定和规则，即选择器中 return 函数的这一部分 — state.todoReducer — 必须始终与您命名并传递给您的缩减器相同商店？

Answer 1

当你将{ reducer: { todoReducer } }传递给configureStore时，redux会在状态中创建一个对应的属性。

createStore({
  reducer: {
    todoReducer: (state, action) => { ... },
  }
})

// redux state
{
  todoReducer: {
    // whatever todoReducer returns
  }
}

对于 reducer 中的每个属性，你会得到一个属性状态：

createStore({
  reducer: {
    todoReducer: (state, action) => { ... },
    someOtherReducer: (state, action) => { ... }
  }
})

// redux state
{
  todoReducer: {
    // whatever todoReducer returns
  },
  someOtherReducer: {
    // whatever someOtherReducer returns
  }
}

您的选择器正在 returning 状态对象的命名属性。如果状态中不存在名为属性的选择器，则选择器将 return 未定义。如果后续代码需要一个数组并尝试在其上调用映射，您将收到错误。

考虑：

const state = {
  todoReducer: ["one", "two", "three"]
}

// this works
const todo = state.todoReducer; // array
const allCaps = todo.map(item => item.toUpperCase());
// ["ONE", "TWO", "THREE"]

// this doesn't
const notThere = state.nonexistentProperty; // undefined
const boom = notThere.map(item => item.toUpperCase()); // error

如果命名不正确，Redux 选择器函数 returns 会出错

Redux Selector function returns error if not named correctly

javascript

reactjs

redux

react-redux

redux-toolkit