What Is Redux?

You might have heard the word Redux multiple times and you wonder What is Redux? In the following short video and article, I will explain in less than a minute What is Redux

Redux is simply a store to store the state of the variables in your app.?Redux creates a?process and procedures?to interact with the store so that?components?will not just update or read the store randomly. Similar to the bank. It does not mean because you have money in the bank that you can go anytime, open the vault, and take money. You have to go through certain steps to withdraw money. In the rest of the article, I will show how to create a Redux Hello World to explain how Redux works before adding it to React.

In short,?Redux is a way to manage the “state” or we can say it is a cache or storage that can be accessed by all components in a structured way. It has to be accessed?through a “Reducer” and “Actions”

Here I am going to only document the steps to create a Hello World Redux without much talking and in one file for simplicity. This is not real-world practice, but I want to explain how things move around in an easy way without jumping between files :). The final code can be found?here

First Let’s understand how Redux works (without React)

I will use Node.js script to show how Redux works between the Store, Actions, and Reducers

1. install redux

npm install --save redux        

Redux is a stand-alone library. Here we are installing only redux.

2. Now create a js file (mine named?ReduxHelloWorld.js?https://github.com/ranyelhousieny/testing-redux/blob/master/src/ReduxHelloWorld.js)

3. import redux

const redux = require('redux');        

4. Create a basic reducer

The reducer is nothing but a pure function that takes currentState and Action and returns a new state. A valid Reducer can return the current state. We have to?create the Reducer before the store?because it is needed for creating the store

// 1. Create a basic Reducer
const rootReducer = ( currentState = 0, action ) => { 
    return currentState;
};        

5. Create a store

// 2. create a store
const store = redux.createStore( rootReducer );        

The store has few methods to execute. One of them is getState(). Let’s write the current state to the console and run the file using “node ReduxHelloWorld.js as follows:

What we have done here? We created a store that will call the reducer?and initialize with the initial state of zero. Now let’s dispatch some actions

6. add reducer actions

The reducer is just a function with a switch statement to decide which action to execute according to the action.type. Let’s add an action to increment state

7. dispatch actions

Another method that we execute on the store is to dispatch an action.

store.dispatch({ type:'INCREMENT' });        

Usually, it takes a type and a Payload.?But for simplicity, I will only pass a type for now.

Here is the complete File and the results from running it

Of course in real life, the state will be a more complex object with multiple values and nested objects but this is the overall idea. Here is what happened, again, step by step

1. We created the store and added the initial value (from reducer)

2. Dispatch an Action to increment the value of the state

I hope this explains how Redux works. Now, let’s map this into React see you in the following articles

First React-Redux and Reading the State

Second React-Redux and Changing the State

Thanks

By: Rany Elhousieny

Subscribe to the Software Engineering Newsletter where I share my decades of experience