如何使用 yield select 管理接受参数的选择器？

Question

我有一个 React 应用程序，我在其中使用 Redux 和 Redux-Saga 并 Reselect 作为选择器库（使用 Immer 来处理 Redux 状态的不变性）。我写这个问题是因为我想了解我处理带参数的选择器的方法是否完全正确。

我个人更喜欢避免在 sagas 中使用 yield select，因为我想保留中间件 not depend on the Store's state，但我的旧代码中包含带有 yield select 的 sagas。

下面是我必须编写的代码来实现我的选择器并将他调用到组件和传奇中。我从Reselec doc 获得了选择器实现。

// selectors.js: Selector implementation
const makeGetPerson = createSelector(
  getPersonsList,
  (state, id) => id,
  (persons, id) => persons.find((person) => person.id === id)
);

// components.js: if I have to use the selector into a component
const person = useSelector((state) => makeGetPerson(state, id))


// saga.js: if I have to use the selector into a saga
const persons = yield select(getPersonsList)
const person = persons.find((person) => person.id === id)

目前，我必须使用返回元素列表的选择器并手动过滤它们。有没有办法在 a saga 中做类似yield select((state) => getPersonsList(state, id)) 的事情？我还缺少其他方法吗？

Answer 1

select 效果创建器在选择器函数之后接受附加参数，然后将其发送到选择器本身，因此您可以这样做：

const person = yield select(makeGetPerson, id);

文档：https://redux-saga.js.org/docs/api/#selectselector-args

Answer 2

您也可以将 createSelectPersonById 设为咖喱：

const createSelectPersonById = id => createSelector(
  getPersonsList,
  (persons) => persons.find((person) => person.id === id)
);
// components
const person = useSelector(createSelectPersonById(id))
//saga
const person = yield select(createSelectPersonById(id));

在按 id 选择人员中，您只是返回状态而不是新对象，但如果您每次都可以在组件中使用 useMemo 时确实返回一个新对象，这样您就不会在分派不相关的操作时获得不必要的重新渲染：

//selector returning new object every time it is executed
const createSelectPersonById = (id) =>
  createSelector(getPersonsList, (persons) => {
    const person = persons.find(
      (person) => person.id === id
    );
    //returning a new object reference every time
    return {
      ...person,
      fullName:formatFullName(person)
    }
  });
//in components
const selectPersonById = React.useMemo(
  ()=>createSelectPersonById(id),
  [id]//selector only re created when id changes
)
const person = useSelector(selectPersonById);
//in saga nothing changes, no need to memoize:
const person = yield select(createSelectPersonById(id));

更多关于我如何以及为什么在 React 中使参数化选择器成为咖喱的信息可以在 here 找到。