The 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 managing the state with the
store and passing the
dispatch references through props. Redux also triggers the UI to re-render with
store.subscribe(render). So why do you need to use React Redux?
Even though the application works, this is not the best implementation, especially if the application were to grow.
The first issue with this implementation is passing the
dispatch reference through props. Using props to access the
state or to dispatch actions adds unneeded complexity. Keeping track of errors in this situation is unmanageable as the number of components increases.
<App> component uses props drilling, which means it is passing props to child components without using them. This is something React developers like to avoid in order to make components more reusable.
The last issue is subscribing
render() to changes in the state. This creates more overhead by repeatedly calling
ReactDOM.render(), which is not the intended implementation for rendering React components.
With React Redux you will learn how to solve these issues by:
- Giving the entire application access to the Redux store without using props and props drilling.
- Subscribing individual components to specific pieces of the application state for optimized rendering.
- Easily dispatching actions within components.
Move to the next exercise to install the React Redux package.