How React-Redux Works

React’s greatest strength is its component-based architecture, where “parent” components render “children” components. It also happens to be its greatest weakness.

React revolves around state, and, whenever it is updated, it will cause the webpage to re-render. That efficiency is what makes React the tool of choice for the modern web developer.

Its fundamental flaw is exposed, however, when the application grows too large and managing state across multiple components becomes cumbersome.

The nature of React’s state is that it can only be managed on the local component where it exists. Data only flows downstream (parent to children). The only way for a child component to manage state on a parent component is to create a function on the parent component and pass it down as a property on the child component.

Creating functions to pass down to children as a property sounds like a great idea when the application is small. However, when a parent component has ten children and the tenth child component requires a function from the parent component, a developer would need to pass the function down from the first to the ninth child components in order to get to the tenth child component. That is inefficient and a waste of time.

The go-to for the industry is usually to implement a state management library such as Redux together with React (React-Redux). React-Redux solves React’s issue by creating a single source of truth (which I will call the global state) that any component can access.

The global state in React-Redux is handled by a centralized data store. React components can access the store by utilizing the Connect function (imported from the React-Redux library) and utilizing a function that is generally called “mapStateToProps”, which allows components to utilize the global state as a prop.

Components can also make changes to the global state by adding another function into the Connect function’s parameter that is generally called “mapDispatchToProps”, which will trigger a global state update.

A potential issue with React-Redux is that it involves a bit of setup, which may be beyond what a simple web application may require. That is a decision that the developer will need to make. For the most part, React-Redux will end up being more pro rather than con.