How to manage a selector that accepts arguments with yield select?

Question

I have a React application where I'm using Redux and Redux-Saga and Reselect as selector library (with Immer to handle the immutability of the Redux state). I'm writing this question because I'd like to understand if my approach to handle the selector with argument is fully correct.

I personally prefer to avoid the yield select into the sagas because I'd like to keep the middleware not depend on the Store's state, but I have legacy code that has sagas with yield select in it.

Here below the code that I have to write to implement my selector and invoke him into the component and into the saga. I got the selector implementation from the 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)

At the moment from the saga I have to use the selector that return the list of element and manually filter them. Is there a way to do something like yield select((state) => getPersonsList(state, id)) into the a saga ? Is there any other approach that I'm missing ?

Answer 1

The select effect creator accepts additional arguments after the selector function which are then send to the selector itself, so you can do this:

const person = yield select(makeGetPerson, id);

Docs: https://redux-saga.js.org/docs/api/#selectselector-args