Your React components may communicate with a Redux store without having to manually write the interaction code thanks to the react-redux package, the official Redux-UI binding module for React. This makes it possible for an application to rely on Redux to handle the overall state and React to render the user interface in accordance with the state.
npm install react-redux An initial npm installation of the react-redux package is required before adding it to a React/Redux project. A handful of the react-redux resources that were imported are:
- [Provider]
- [useSelector]
- [useDispatch]
A nested child component can access the Redux store thanks to the component. The store itself should be used as a prop. All child components of the component are now able to access the Redux store, get data, and dispatch actions using the react-redux resources.
Each time the state is updated, the useSelector() hook uses a selector function to get state data from the Redux store. Using useSelector (), any component contained within may access state. Inline selectors or pre-defined functions may be used with useSelector().
whenever a React component is called, Selector (selector) achieves two objectives:
- [returns the data that the selector retrieved.]
- [allows you to force a re-render if the selector's result changes and subscribes the React component to changes in the store.]
A reference to the store.dispatch() method is returned by the useDispatch() hook. The component must be nested inside of a React component before it can be used.
By convention, a React component assigns the reference returned by useDispatch() and defines dispatch. The component can then dispatch action objects by using dispatch().
Selectors are user-defined Redux functions that pull out particular data from a store state value. React components can utilize selectors to retrieve specific data from the store since they are pure functions that accept the state as an argument.
As a rule, the names of selector functions begin with select and provide information about the data they get from the store.