An Interest In:
Web News this Week
- February 28, 2024
- February 27, 2024
- February 26, 2024
- February 25, 2024
- February 24, 2024
- February 23, 2024
- February 22, 2024
It's OK to useStore with React-Redux
I recently had two members of my team independently confuse themselves with a subtle point in the react-redux bindings. We have a few instances where a component includes callbacks and inside of those callbacks we need to compute some values from our redux state. We take those values and dispatch an action:
import { useDispatch } from 'react-redux';function Component() { const dispatch = useDispatch(); function callback() { const value = ... // requires us to compute a value from the state dispatch(someAction(value)) } return <div onClick={callback} ... ></div>}
There are two relevant APIs in react-redux here: useSelector
and useStore
. useSelector
accepts a selector, a function which computes a value from state; when that value changes, the component will re-render.
useStore
on the other-hand, provides access to the redux store within component, but it will not re-render the component on any state changes.
The confusion I've seen comes from a small comment within the react-redux docs:
[useStore] should probably not be used frequently. Prefer useSelector() as your primary choice. However, this may be useful for less common scenarios that do require access to the store, such as replacing reducers.
I think this statement makes sense. The primary use-case is to connect your component to a store so that when a particular part of the store changes, the component re-renders. useSelector
achieves this and that is the intent of the statement. However, it's easy to misunderstand this as useStore
is "discouraged" and this causes trouble.
Suppose you interpret the statement, as my team members did, as "useSelector
should always be preferred". In the above example, this will produce a solution like:
import { useDispatch, useSelector } from 'react-redux';function Component() { const dispatch = useDispatch(); const value = useSelector(someSelector) // compute value from state function callback() { dispatch(someAction(value)) } return <div onClick={callback} ... ></div>}
But this doesn't make sense. We don't need to re-render the component when value
changes! Nothing in the rendered output displays the result of value
. We only need to evaluate value
when the callback is executed. And if value
changes frequently in the state, then we are doing a lot of re-renders that we don't need to.
This is one of those "less common scenarios" where we do want access to the store directly:
import { useDispatch, useStore } from 'react-redux';function Component() { const dispatch = useDispatch(); const store = useStore(); function callback() { const value = someSelector(store.getState()) dispatch(someAction(value)) } return <div onClick={callback} ... ></div>}
This allows the UI to update only when needed and for the correct value to be computed just-in-time, when the callback is executed.
Original Link: https://dev.to/dylangrandmont/it-s-ok-to-usestore-with-react-redux-1fia
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To