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 withdrawal 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 with 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 reduxRedux 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
he 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
Reference:
Subscribe to the Software Engineering Newsletter where I share my decades of experience
