如何将逻辑封装在 createSelector 函数中？

Question

我有一个使用 Redux 的 React Native 应用。

我希望能够在此项目列表的开头添加一个条目但它不起作用。

下面提供了部分代码。

这是我得到的错误：

TypeError: undefined 不是对象（正在计算 'projects.list.push'）

我没有在这里显示正确的语法？？

提前致谢。

initialState: {
    list: [],
    loading: false,
    lastFetch: null,
  },


export const getPickerList = createSelector(
  (state) => state.entities.projects,
  (projects) => projects.list.push({ project_id: 0, project_name: "[All]" }),
  (projects) =>
    projects.list.filter((project) => ({
      project_id: project.project_id,
      project_name: project.project_name,
    }))
);

Answer 1

你这里有两个错误，而且我认为还有一个概念问题。

首先是 你正在通过调用 projects.list.push() 主动变异 projects.list。 You must never mutate state when using Redux.

第二个问题是 all 输入选择器使用 same 参数调用。因此，如果您调用 selectSomeThing(state, "a', 42)，所有输入选择器将被调用 state, "a", 42.

这意味着第二个输入选择器的第一个参数实际上是state，而不是projects。

另一个问题是选择器不是“添加”任何东西的正确位置。这听起来像是状态更新，所有状态更新都必须发生在 reducer 中。

Answer 2

我想你真的想这样做：

export const getPickerList = createSelector(
  (state) => state.entities.projects,
  (projects) => {
    const projectsWithPrefix = [
      { project_id: 0, project_name: "[All]" },
      ...projects
    ];
    // you could filter here as well before returning
    return projectsWithPrefix 
  }
);

但老实说，我不知道你在那里.filter尝试的东西。

通常，您不能像您认为的那样“链接”。除最后一个函数外，所有函数的所有 return 值都作为参数传递给 last 函数，不是下一个。

如何将逻辑封装在 createSelector 函数中？

How to encapsulate logic in a createSelector function?

react-native

redux

reselect