Redux — The Predicatable State Container for JavaScript apps
Redux helps you to write application that behaves consistently , run in different environment. Many of you might have already read/ tried learing redux mainly along with the React Js using react-redux beacuse it makes the State management easy in React.
Is Redux can work stand alone ? . The simplest answer is Yes !, redux is a javascript library available in npm, it can work stand alone.
We can try to understand the basics of redux by writing a simple js file which can be executed using node Js. So to stat with this you should have node installed on you machine. You can do it from here this will also install the npm package manager.
Now you can create a node js app using npm init and then follow the instructions. Navigate to the project folder and create a file index.js.
We haven’t installed the redux library yet. To do this run
npm install redux
The add include the newley installed redux library to our project by adding
const redux = require(‘redux’)
Now we are going explore the key concepts of the redux
- Store
Store is the place were we store all state of the app in an immutable object tree. To create store in redux use createStore() function.
The createStore function accept one argument which is the reducer
const store = redux.createStore(reducer)
In the above code you can see that we have passed an argument ‘reducer’ to the function but the reducer is undefined so the code will defiantly throw an error.
2. Reducer
In simple words reducer is a simple function implementation which has two arguments state and action and return the updated state. Below is the simple implementation of the reducer.
const reducer = (state, action) => {
return state
}
The above code is not doing any action instead it just returning the received state as it is. In ideal scenario the reducer function will be responsible for modifying the state based on the actions despatched. We will see this in the coming sections.
As we have to pass the reducer to the createState we have to define it before calling createState so our updated index file will now look like below
const redux = require(‘redux’)
// Defining the default state
const InitialState = {
count: 0
}
const reducer = ( state =InitialState , action ) => {
return state
}
const store = redux.createState(reducer)
Now you have implemented a basic redux store. Now you can access the state using getState() function.
store.getState()
Add a console log towards the end of the file console.log(store.getState()) and run the script using
node index.js
You will see { counter: 0 } in the console log.
3. Dispatch
Using dispatch we send the actions to the reducer and update state. It’s accessible store.dispatch(). We have to pass the action object as the parameter to the dispatch function. The action object can have any number of elements but it must have a type element. This type element defines the action to be taken. Please see the examples below
store.dispatch({type:‘INCRIMENT_COUNTER’})
store.dispatch({type:‘ADD_COUNTER’, value: 5})
Now we can add the conditions in the reducer to update the states based on this action type.
const reducer = ( state =InitialState , action ) => {
switch(action.type){
case ‘INCRIMENT_COUNTER’:
return {
…state,
counter: state.counter+1
}
case ‘ADD_COUNTER’:
return {
…state,
counter: state.counter + action.value
}
}
// return state if the action type is not handled
return state
}
Now you can see that our reducer implementation is able to handle our actions dispatched.
4. Subscribe
How the code will identify the state change ?. Here comes the concept of subscribe method.
The subscribe method won’t take any arguments instead it will get executed every time when there is a state change. A simple implementation of the subscribe method is as below
store.subscribe(() => {
console.log(store.getState())
})
Note: the subscribe function should be initialised be for executing the dispatch
Now we shall add the subscribe to our code and the updated index.js file will now look like below
const redux = require(‘redux’)
// Defining the default state
const InitialState = {
count: 0
}
const reducer = ( state =InitialState , action ) => {
switch(action.type){
case ‘INCRIMENT_COUNTER’:
return {
…state,
counter: state.counter+1
}
case ‘ADD_COUNTER’:
return {
…state,
counter: state.counter + action.value
}
}
// return state if the action type is not handled
return state
}
const store = reducer.createState(reducer)
store.subscribe(() => {
console.log(store.getState())
})
store.dispatch({type:‘INCRIMENT_COUNTER’})
store.dispatch({type:‘ADD_COUNTER’, value: 5})
Now run the script node index.js . You should see the following in the console
{ counter: 1 }
{ counter: 6 }
What is happened ?. The dispatch function send the actions to the reducer and the reducer executed it and returned the updated state. As we have console.log(store.getState()) in the subscribe method implementation it will execute whenever the state is updated. We have to dispatch implementations so the state is also got updated in twice.
Hope you got some basic understanding of Redux and it’s work flow.
Thanks for reading !!. Happy Coding.
