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