In this post, we will use the main functionalities of Redux and create Actions to add two numbers. We can use Redux without touching React and I suppose that is an easier way to start learning Redux. Because, you don’t see a number of files, which can be intimidating at times. Also according to the official documentation of Redux, You can use Redux together with React, or with any other view library. I started learning Redux through the Mindspace channel on YouTube, so a big shoutout to this channel.
We can use the create-react-app boilerplate to get started. But delete all the code in the index.js file of this boilerplate and use it as a fresh template.
Table of Contents
Installing Redux
To install the stable version of redux use the following command. This assumes you are using npm as your package manager.
npm install redux --save
Defining Store
To use Redux, we can start by defining a store. The store holds the state of the application. In order to do so, we import a method createStore from Redux as follows.
import { createStore } from 'redux';
Next, we create a store using the createStore( ) method and save it in a const. The method createStore( ) takes a reducer and initial state of the application as parameters. The syntax for creating store is:
const store = createStore(reducer, initial state);
Let’s create the initial state as a JavaScript object as follows:
const initialState = {
value: 5
};
Creating Action
Actions are JavaScript objects that send or dispatch the data as a payload of information from the application to the store. In our example, we will dispatch an action which will pass a number as a payload to the reducer. The reducers have the responsibility of handling these actions. Dispatching an action means calling the dispatch method of the redux package and it expects a javascript object. We set a type property and then the type of the action that we want to dispatch. This type of the action is a string and it gives a name to our action.
We set a type property and then the type of the action that we want to dispatch. This type of the action is a string and it gives a name to our action. Payload is the data which we send to the reducer that interacts with the initial state.
Since we want to add number we will name our action as “ADD_NUMBERS”. It is a convention to write the action in the upper case. So let’s create an action that passes a number as a payload. Here the actions are dispatched on the store.
store.dispatch({
type: "ADD_NUMBERS",
payload: 50
})
Creating Reducer
Next, we create a Reducer. Reducer is basically a method which listens to the action and changes the state of the application accordingly. We will simply name our reducer as “reducer” and save it as a const as follows.
const reducer = (state = initialState, action) => { //1
switch (action.type) { //2
case "ADD_NUMBERS": //3
state = { //4
...state, //5
value: state.value+ action.payload, //6
};
break;
}
return state; //7
}
The above code does the following:
1. This reducer method will take two arguments “state” and “action“. These arguments are passed automatically by redux.
const reducer = (state = initialState, action) => { }
We have also set the state equal to the initial state (initialState) by using the ES6 convention.
2. In a reducer, we also want to determine which action occurred because a reducer typically handles multiple actions. So we use a switch statement to check the type of the action (action.type). And accordingly, we handle a case of the action.
3. In our example, I have created an action of the type “ADD_NUMBERS“, so we will write the case as “ADD_NUMBERS“.
4. In redux, we should not mutate the state. I.e, we should not overwrite the initial state, because if we do then it becomes difficult to get back to that state. Redux has a way of doing things in an immutable way. So, we create a new state by creating a new JavaScript object called “state“. This state is no longer the state which is passed as initialState but it is a new JavaScript object.
5. Now, in this newly created JavaScript object called “state“, we want to use all the properties of the old state “initialState“. In ES6 we do this by using a spread operator. The spread operator is the three dots (…). In this way, we get all the properties of the old object and all these properties are then added to the new object. Here is a great article about the three dots in JavaScript.
6. Next, we want to set a new value to the property “value” of the newly created state object. We do so by adding the “value” of the initialState to the number which is passed as payload from the action. And the result of this addition is then saved to the property value of the new State object.
7. Our reducer also has to always return a state, so we return a state at the end, and this returned state will be then used by our application.
Creating Store
We have now created the Action as well as a reducer to handle this Action. We will now modify all proper parameters to our createStore method. Since we have passed the initial state value to our reducer’s state argument, we don’t need to pass the initial state as an argument to the createStore method. We now create our store as follows:
const store = createStore(reducer);
As we are not making use of the react at present, we can’t display the output as a webpage. Therefore we will make use the subscribe( ) method of redux as follows:
store.subscribe(() => {
console.log("store updated", store.getState());
})
The final code now looks like:
import { createStore } from 'redux';
const initialState = {
value : 5,
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case "ADD_NUMBERS":
state = {
...state,
value : state.value + action.payload,
};
break;
}
return state;
}
const store = createStore(reducer);
store.subscribe(() => {
console.log("store updated", store.getState());
})
store.dispatch({
type: "ADD_NUMBERS",
payload: 50
})
When we check the console of our browser we get the following result:
The value which is displayed is the sum of the initial state and the value passed as payload by action. In the coming post we will create more actions as well as multiple reducers and use the combineReducers( ) method of Reux.
