Connect to React with React Redux
Learn to access the Redux store to retrieve data and dispatch actions througout your applications using the react-redux package.
StartKey Concepts
Review core concepts you need to learn to master this subject
react-redux Package
Install react-redux
The Provider Component
The useSelector() Hook
The useDispatch() Hook
Selectors
react-redux Package
react-redux Package
The react-redux
package, the official Redux-UI binding package for React, lets your React components interact with a Redux store without writing the interaction logic yourself. This allows an application to rely on Redux to manage the global state and React to render the UI based on the state.
Interactions may include reading data from a Redux store and dispatching actions to the store.
- 1React Redux is the official Redux-UI binding package for React. This means React Redux handles the interactions between React’s optimized UI rendering and Redux’s sta…
- 2The recipe application in the code editor works. Run it right now and give it a try. React is handling the UI rendering through ReactDOM.render() which is inside the render() function. Redux is man…
- 3To take advantage of React Redux within your application, you must install the react-redux package using npm, the Node Package Manager. If you’re not familiar with npm, you can [learn more in the d…
- 4Now that the react-redux library is installed, it is time to start the one-way data flow by giving the top-level component access to the Redux store. The component from the react-redux librar…
- 6With selectors, you have given your application the instructions to access data from the Redux store. To use these instructions the useSelector() hook is provided by react-redux. useSelector() acco…
- 7With the component, selectors, and useSelector() implemented, you are now able to access the application state and subscribe component rendering to data changes. In this exercise, you are going t…
- 8Congratulations on finishing this lesson on the react-redux library! Let’s review what you’ve learned: - React and Redux work well together but need more to support R…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory