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 state and 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 state and 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.

Also, the <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.