Comment utiliser correctement une fonction de sélection au curry avec le crochet useSelector de react-redux?

Question

J'utilise react-redux avec des hooks, et j'ai besoin d'un sélecteur qui prend un paramètre qui n'est pas un accessoire. Les états documentation

La fonction de sélection ne reçoit pas d'argument ownProps. Cependant, les accessoires peuvent être utilisés par fermeture (voir les exemples ci-dessous) ou en utilisant un sélecteur au curry.

Cependant, ils ne fournissent pas d'exemple. Quelle est la bonne façon de faire du curry comme décrit dans la documentation?

C'est ce que j'ai fait et cela semble fonctionner, mais est-ce vrai? Y a-t-il des implications à retourner une fonction à partir de la fonction useSelector (il semble qu'elle ne sera jamais restituée?)

// selectors
export const getTodoById = state => id => {
  let t = state.todo.byId[id];
  // add display name to todo object
  return { ...t, display: getFancyDisplayName(t) };
};

const getFancyDisplayName = t => `${t.id}: ${t.title}`;

// example component
const TodoComponent = () => {
   // get id from react-router in URL
   const id = match.params.id && decodeURIComponent(match.params.id);

   const todo = useSelector(getTodoById)(id);

   return <span>todo.display</span>;
}

Answer 1

Oui, c'est comme ça que ça se passe, exemple simplifié:

// Curried functions
const getStateById = state => id => state.todo.byId[id];

const getIdByState = id => state => state.todo.byId[id];

const SOME_ID = 42;

const TodoComponent = () => {
  // id from API
  const id = SOME_ID;

  // Curried
  const todoCurried = useSelector(getStateById)(id);
  const todoCurried2 = useSelector(getIdByState(id));

  // Closure
  const todoClosure = useSelector(state => state.todo.byId[id]);

  // Curried + Closure
  const todoNormal = useSelector(state => getStateById(state)(id));

  return (
    <>
      <span>{todoCurried.display}</span>
      <span>{todoCurried2.display}</span>
      <span>{todoClosure.display}</span>
      <span>{todoNormal.display}</span>
    </>
  );
};

Exemple complet: