# Redux in Plain JS

## Redux Fundamental - Action, Dispatch, Reducer & Store

Redux is based on 4 fundamental elements -

1. **Action & Action Creators** - Descriptors that tells what **type of change** should apply to the **Global State.**
2. **Dispatch** - Carries an `action` to the `reducer`
3. **Reducer** -  Pure function that takes an `action` & a `state`as input, and return a **New State.**
4. **Store** - A **State Container** that holds the **Application's** **State**

```jsx
// Importing Redux
const redux = require("redux")

// Action Creators - Describe the types of actions

// increment
function increment(){
    return {
        type: "INCREMENT"
    }
}

// decrement
function decrement(){
    return {
        type: "DECREMENT"
    }
}

// double
function double(){
    return {
        type: "DOUBLE"
    }
}

// halve
function halve(){
    return {
        type: "HALVE"
    }
}

// Reducer - takes an Action & Old Version of State as Input and returns a New Version of State 
function reducer(state = {count: 0}, action){
    switch(action.type) {
        case "INCREMENT":
            return{
                count: state.count + 1
            }
       case "DECREMENT":
            return{
                count: state.count - 1
            }
        case "DOUBLE":
            return{
                count: state.count * 2
            }
        case "HALVE":
            return{
                count: Math.round(state.count / 2)
            }
        default:
            return state
    } 
}

// Creating Store - createStore() takes reducer() as input
const store = redux.createStore(reducer)

// subscribe() - a redux method that is called everytime a change occurs in the Store 
store.subscribe(()=>{
    // getState() returns the current state tree of your application
    console.log(store.getState())
})

// Dispatch - carries the information to Reducer to inform what Type of Action should be performed 
store.dispatch(increment())
store.dispatch(double())
store.dispatch(halve())
store.dispatch(decrement())
```

## Adding Payload to Actions&#x20;

**Action Creator** contains a **Payload** that contains the **data** we need to pass to the `reducer`

```jsx
// Importing Redux
const redux = require("redux")

// Action Creators

// changeCount Action
function changeCount(amount){
    return {
        type: "CHANGE_COUNT",
        payload: amount 
    }
}

// Reducer - takes an Action & Old Version of State as Input and returns a New Version of State 
function myreducer(state = {count: 0}, action){
    switch(action.type) {
        case "CHANGE_COUNT":
            return{
                count: state.count + action.payload
            }
        default:
            return state // return the latest state
    } 
}

// Creating Store - createStore() takes reducer as input
const store = redux.createStore(myreducer)

// subscribe() - a redux method that is called everytime a change occurs in the Store 
store.subscribe(()=>{
    // getState() returns the current state tree of your application
    console.log(store.getState())
})

// Dispatch - carries the information to Reducer to inform what Type of Action should be performed 
store.dispatch(changeCount(5)) // passing '5' as a payload
```
