ストアからいくつかのオブジェクトを接続したい場合、コードでuseSelectorの数を減らすにはどうすればよいですか？
user = useSelector(store => store.user.user, shallowEqual),
todos = useSelector(store => store.todos.todos, shallowEqual),
id = useSelector(store => store.todos.id, shallowEqual),
title = useSelector(store => store.todos.title, shallowEqual),
deadline = useSelector(store => store.todos.deadline, shallowEqual),
status = useSelector(store => store.todos.status, shallowEqual),
isOpen = useSelector(store => store.todos.showPopUp, shallowEqual);
それほど苦痛ではない場合は、react、redux、またはreact-reduxについて一緒に読むための良い本をいくつか書いてください。
ありがとう！
セレクター関数を作成し、カスタムフックを作成できます。
したがって、上記のシナリオでは、次のことができます。
// selectors.js (selectors shared across files)
const selectUser = store => store.user.user;
const selectTodos = store => store.todos.todos;
// Now in your component:
const [user, todos, ...] = useSelector(store => [
selectUser,
selectStore,
...
].map(f => f(store)), shallowCompareArrayMembers);
// (Feel free to alternatively use object destructuring either).
// Where shallowCompareArrayMembers is a custom comparator to lift shallowEqual over an array:
const shallowCompareArrayMembers = (prev, next) => {
if (prev.length !== next.length) {
throw new Error('Expected array lengths to be same');
}
for (let i = 0; i < prev.length; i++) {
if (!shallowEqual(prev[i], next[i])) return false;
}
return true;
}
または、同じセレクターセットを複数のコンポーネントで何度も組み合わせていることに気付いた場合は、カスタムフックですべてを抽出します。
const useTodoDetailsSelection = () => ({
user: useSelector(store => store.user.user, shallowEqual),
todos: useSelector(store => store.todos.todos, shallowEqual),
...
})
次に、そのフックをコンポーネントで使用します。
const MyComponent = () => {
const {user, todos, ...} = useTodoDetailsSelection();
// Render components
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加