Let's say my state is represented by an object like that:
state = {
array: [1, 2, 3, 4, 5]
}
I know if i use:
const state = useSelector(state => state.array)
My component re-render every time one of the elements of the array changes, but i don't want it. So, a solution can be:
state = {
render: false,
array: [1, 2, 3, 4, 5]
}
And now i can:
const state = useSelector(state => state.render)
And handle the rendering by conditionally dispatching some actions. But in this way i have no access to the array anymore. The problem here is that in my project the are components who need to re-render every time the array updates, and components who need to re-render only in specific cases. Another solution is to create another store only for the component which need to re-render rarely, but it seems too wired to me.
useSelector
accepts a second argument equlityFn
:
const result: any = useSelector(selector: Function, equalityFn?: Function)
If equlityFn
returns true
, no subscription update will accurate, so the render won't result from the selector.
const state = useSelector(
(state) => state.array,
(prevState, currState) => {
return isRender(currState);
}
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.