フック付きのreact-reduxを使用していて、propではないパラメーターを取るセレクターが必要です。 ドキュメント の状態
セレクター関数は、ownProps引数を受け取りません。ただし、クロージャーを介して(以下の例を参照)、またはカリー化されたセレクターを使用して、小道具を使用できます。
ただし、例は提供されていません。ドキュメントに記載されているカレーの正しい方法は何ですか?
これは私がやったことであり、それはうまくいくようですが、これは正しいですか? useSelector
関数から関数を返すことによる影響はありますか(再レンダリングされないようです)。
// 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>;
}
はい、それはそれがどのように行われるか、簡単な例です:
// 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>
</>
);
};
完全な例: