- Redux stores can be used with any UI layer
- UI code always subscribes to the store, gets the latest state, and redraws itself
- React-Redux is the official Redux UI bindings library for React
- React-Redux is installed as a separate
react-redux
package
- React-Redux is installed as a separate
- The
useSelector
hook lets React components read data from the store- Selector functions take the entire store
state
as an argument, and return a value based on that state useSelector
calls its selector function and returns the result from the selectoruseSelector
subscribes to the store, and re-runs the selector each time an action is dispatched.- Whenever the selector result changes,
useSelector
forces the component to re-render with the new data
- Selector functions take the entire store
- The
useDispatch
hook lets React components dispatch actions to the storeuseDispatch
returns the actualstore.dispatch
function- You can call
dispatch(action)
as needed inside your components
- The
<Provider>
component makes the store available to other React components- Render
<Provider store={store}>
around your entire<App>
- Render
References
https://redux.js.org/tutorials/fundamentals/part-5-ui-react