Basics of Redux

#javascript #redux #react #webdev

What is Redux?
Lifecycle methods of redux
Definitions of lifecycle methods

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

Definitions

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
store.dispatch(action);

console.log(store.getState());