时间戳

首页 > 解决方案 > 如何使用 yield select 管理接受参数的选择器？

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

问题描述

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

我个人更喜欢避免yield select进入 sagas，因为我想让中间件不依赖于 Store 的 state，但是我有包含 sagas 的遗留代码yield select。

下面是我必须编写的代码来实现我的选择器并将他调用到组件和传奇中。我从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)

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

标签： reactjsreduxredux-sagareselectimmer.js

解决方案

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

const person = yield select(makeGetPerson, id);

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

推荐阅读