React Redux concept through an example.

3 min readApr 15, 2018

“Camel walks through deserts of Great Sand Dunes National Park and Preserve” by Lyndsey Marie on Unsplash

What’s Redux?

Redux is an open-source JavaScript library for managing application state [Wikipedia]

Actually, I will jump quickly, into an example so I can explain the Redux concept step by step in a better way .

Let’s assume that we have a React JS application , and this application has 3 Components , each component has its own states :

A- Component 1 has state object of ( X1, Y1 ).

B- Component 2 has state object of( X2 , Y2 ).

C- Component 3 has state object of ( X3 , Y3 ).

Let’s combine all those states from all components into one big object , so we can call that object a Store

Now, we have to provide a layer of communication because we need the Store to be visible to all components (1,2,3)

Once the components are getting connected to the store through the provider , they become Smart components .

Let’s Recap:

Till now we have a store (has all the states from all components ) which is connected to three components(smart components) through a Provider .

Actions, Reducers, and Action Creators ?

Now I have to introduce `Actions and Reducers` , what are Actions, Action Creators and Reducers in Redux ??

Action : Is an object that has Type of action , and data (payload) .
Action Creator : Is the function that returns that action (object)
Reducer : It’s a function that accepts 2 parameters (states and action) as an input, and returns one data object (the new state that have to be stored in the application store).

Why Actions ?

Because it’s the only way that smart components tells the Store about the changes made to the application state, It describes that through the ( type of the action and data/payload ).

Why Reducers?

Because it’s the only way to update the state in the Store . how ? >> It takes those actions (payload or object) and does the update in the Store.

How is it working ?