DEV Community

Cover image for Basics of Redux

Basics of Redux

Dostonbek Oripjonov
Junior web developer with great personality, patient and potential!
Updated on ・2 min read

Table of contents

What is Redux

Redux is state managament library. Common use cases of Redux with user interface libraries like React, Vue or Angular. Howerver, you can add this library to your any web project to control your global state. More

Lifecycle methods of redux


Action creator is function that creates or returns plain javascript object.
Action is plain javascript object. So, Action creator returns Actions. Actions must have type which defines purpose of action and optionally payload which contains data.

// Action creator                 // Action
const myActionCreator = value => {type : "INCREASE_TO_ONE", paylaod : value }

dispatch is function that take action and makes copies of this object. It is built in function.

Reducers are functions which take suitable action according to type of action which is dispatched and updates state.

// Reducer
const myReducer = (prevState = null, action) => {
 if(action.type === "INCREASE_TO_ONE"){
    prevState = action.payload + 1;
    return prevState;
 return prevState;

State is actual state value of your application;
Below given example to use Redux

// import built in libraries from redux
import {createStore, combineReducers} from 'redux'

// Action creator                 // Action
const myActionCreator = value => {return {type : "INCREASE_TO_ONE", paylaod : value }} ;

// Reducer
const myReducer = (prevState = 0, action) => {
 if(action.type === "INCREASE_TO_ONE"){
    prevState = action.paylaod + 1;
    return prevState;
 return prevState;

const combinedReducers = combineReducers({value : myReducer})
const store = createStore(combinedReducers);
const action = myActionCreator(6);
// use case of dispatch function


Test that code in

That is it !!!

Discussion (1)

dastnbek profile image
Dostonbek Oripjonov Author

React & Redux soon !!!