Say you have a component with a deeply nested structure. It has many children components with complex logic.

Parent Component
	- Child A
		- Child B
			- Child C
				- Child D
			- Child E
	- Child F
		- Child G

Lets say that you have a variable, user, that you would like Child D to use. In such situations like this, you’d have to pass user as a prop into Child A, then Child B, then Child C, and finally to Child D to be used. However, children A, B, C don’t use the variable,user, at all. This is called prop-drilling and is highly recommend against. To prevent this anti-pattern, you can use React Context or Redux.

What is Redux?

Redux is used for state management, and primarily used as a centralized state. Meaning that all components will have access to this “global” store.

<aside> 💡 You can think of a “state” as a dataset. React uses the “state” to store data for each component and provides functions to control the state (i.e. updating the state).

</aside>

<aside> 💡 In terms of Redux, a “store” is a collection of states. Redux’s store provides a lot of functionality to manage the store, which we’ll talk more about. React components are subscribed to the store, (i.e. they listen for state updates)

</aside>

Redux Flow

View/UI

The view/UI consists of your React components. They are subscribed to the store to obtain Redux’s state to use for themselves. When the states in the store changes, the components automatically receive the new states.

Action

To modify the state, you will have to dispatch an action. To dispatch is to simply send an event to Redux’s store to indicate that you’d like to modify something. The action is what and how you are modifying the state. Say there is a user state in Redux and you want to update the user’s name. You’d dispatch an action of changing the name and include the new name in the action’s payload, which can be thought of as an arguments.

Reducers

Redux contains reducers that handle different actions. Once an action has been dispatched to change the user’s name, a corresponding reducer will be invoked with the action’s payload and the reducer will modify Redux’s state to change the user’s name.

Store

Once the state has been changed, Redux automatically detects these changes and and notifies the components that are subscribed to the store.