📄 Table of contents

◉ What is Redux?

The Problem With Traditional MVC Architecture

How State Management Solves The Problem

Building Blocks Of Redux

[1]. Action

{
type: LOGIN_USER,
payload: {username: ‘sebastian’, password: ‘123456’}
}
function authUser(data) {
return {
type: LOGIN_USER,
payload: data
}
}
function myReducer (state , action)  {
switch (action.type) {
case 'LOGIN_USER':
return Object.assign({}, state, {
auth: action.payload
})
default:
return state
}
}
import { createStore } from ‘redux’;
let store = createStore(myReducer);
let authData = {username: ‘sebastian’, password: ‘123456’};
store.dispatch(authUser(authData));

◉ Basic Redux Setup

Minimal Redux BareBone setup
Counter Container Component

◉ Middleware in React/Redux

The middleware sits in between the dispatch and reducers, which means we can alter our dispatched actions before they get to the reducers or execute some code during the dispatch.

function getUserName(userId) {
return dispatch => {
return fetch(`/api/personalDetails/${userId}`)
.then(response => response.json())
.then(json => dispatch({ type: "SET_USERNAME", userName: json.userName })
}
}

When to use

◉ Creating custom Middleware in React/Redux.

Redux library, and it’s modules.
const customMiddleware = store => next => action => {
...
}
const foo = a => b => a + b;
foo(1)(2); //=> 3
OR in ES5function foo(a) {
return function(b) {
return a + b;
}
}
import {createStore, applyMiddleware} from "redux";
On dispatch, middlewares are triggered.

Redux-Thunk vs. Redux-Saga

But why a middleware is required ?

Hence, to support Asynchronous(-ity), middleware(s) comes to the rescue!

Redux-thunk

Redux-Saga

How redux-saga works ?

So who wins? Redux-Thunk or Redux-Saga?

Redux thunk version
Redux-saga version

Middleware

Redux-thunk

export const thunkName = parameters => (dispatch, getState) => {
// You can write your application logic here
};
import axios from "axios";
import GET_LIST_API_URL from "../config";
const fetchList = () => {
return (dispatch) => {
axios.get(GET_LIST_API_URL)
.then((responseData) => {
dispatch(getList(responseData.list));
})
.catch((error) => {
console.log(error.message);
});
};
};
const getList = (payload) => {
return {
type: "GET_LIST",
payload
};
}
export {fetchList}

Redux-saga

import axios from "axios";
import GET_LIST_API_URL from "../config";
import {call, put} from "redux-saga/effects";
const fetchList = () => {
return axios.get(GET_LIST_API_URL);
}
function* fetchList () {
try {
const responseData = yield call(getCharacters);
yield put({
type: "GET_LIST",
payload: responseData.list});
}
catch (error) {
console.log(error.message);
}
}
export {fetchList};

Conclusion

◉ List of Redux Alternatives

Reducer Example

◉ Immutability in React

this.state.username = "jamesdoe";   X(not recommended )

◉ Updating (Mutating) state

let user = { name: "James Doe", location: "Lagos" }
let newUser = user;
user.location = "Abia";
console.log(newUser.location) // "Abia" (NOT what we expected)

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.