Basics of Redux

Dostonbek Oripjonov — Mon, 08 Jul 2019 05:53:05 +0000

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());

Test that code in codesandbox.io

That is it !!!

HappyWeekend

Dostonbek Oripjonov — Sat, 06 Jul 2019 11:28:09 +0000

Let's create simple React&Redux project

Modern fullStack webdev

Dostonbek Oripjonov — Sat, 06 Jul 2019 09:56:36 +0000

What is stack for modern fullstack web developer ?
React, Node, MongoDB

DEV Community: Dostonbek Oripjonov