Redux

HOW TO INSTALL REDUX

npm i redux

IMPORT REDUX

// ES6
import redux from 'redux';
// simple node js app
const redux = require('redux');

TOP 3 CORE CONCEPTS

Store: save the application state
Action: describe what happend on state The only way to interact with the store
Reducer: applay the action on the store state

TOP 3 MAIN PRINCIPLES

1. store all application state in single object in the store
2. you can't modifies the store state only if you send an action to redux
3. you need to write reducer to determine how store state change when an action dispatched

const reducer = (prevState , action) => {
    if(action.type === 'DELETE'){
        //delete
    }else if(action.type === 'ADD'){
        //add
    }
}

ACTIONS

Action: is a JSON object with type
we prefer to make the type as constance to avoid wrong spilling

const BUY_CAKE = 'BUY_CAKE';
{
    type:BUY_CAKE,
    info:'first action'
}

Action Builder: is a function that returns an specific action so when you edit an action you just need to edit the builder.

const buyCake = () => {
    return {
        type: BUY_CAKE,
        info: 'first action'
    }
}

REDUCER

reducer: is a function that accept prevState and an action then return the new state
at first we pass the initial state to reducer

const intialState = {
    numberOfCakes:10
}

const reducer = (prevState = intialState , action) => {
    if(action.type === BUY_CAKE){
        return {
            ...prevState,
            numberOfCakes: prevState.numberOfCakes - 1
        }
    }else{
        return prevState;
    }
}

STORE

Store: contains the application state

HOW TO CREATE A STORE

const store = redux.createStore(reducer);

STORE MAIN FUNCTIONS

1. getState() ➡ is a function that returns the current state

console.log(store.getState());    

2. subscribe(subscriber) ➡ is a function that accept another function then the redux will call this function automatically when the store state is updated like Observer Pattern

const unsubscribe = store.subscribe(() => {
    console.log("updated State : " , store.getState())
});

3. unsubscribe() ➡ is a function return from calling subscribe function, when unsubscribe function it will remove the subscriber from the redux update list

store.unsubscribe()

4. dispatch(action) ➡ is a function that recive an action and pass it to the reducer function

store.dispatch(buyCake());

full store example

const store = redux.createStore(reducer);
console.log("inatial State : " , store.getState());

const unsubscribe = store.subscribe(() => {
    console.log("updated State : " , store.getState())
});

store.dispatch(buyCake());
store.dispatch(buyCake());
store.dispatch(buyCake());

Output

inatial State :  { numberOfCakes: 10 }
updated State :  { numberOfCakes: 9 }
updated State :  { numberOfCakes: 8 }
updated State :  { numberOfCakes: 7 }

MULTIBLE REDUCERS

sometimes you need to create more than one reducer each on to handle different state
Example state for cake and state for icecream
but createStore function does not accept more than one reducer so redux give us a function to compine reducers

const rootReducer = redux.combineReducers({
    cake: cakeReducer,
    iceCream: icecreamReducer
})
const store = redux.createStore(rootReducer);