• Redux
  • Redux keywords
  • Redux Dataflow
    • Scenario 1 - Depositing the money
    • Scenario 2 - Withdrawing the money
  • Reducer
  • Adding package in Project

Redux

• A JS library for predictable and maintainable global state management

Redux keywords

1. Reducer
2. Action
3. Action creator
4. Action Type
5. Acion Payload
6. Dispatch
7. Store

Redux Dataflow

• Let's suppose create a few characters to understand redux flow.
  1. KING which is basically UI.
  2. SERVENT which is called Action creator
  3. POSTMAN, which takes action and dispatched (delivered) to the BANK
  4. BANK MANAGER, is a reducer
  5. BANK, is a king account store.

Scenario 1 - Depositing the money

1. KING wants to deposit some amount into his account. But he can't go to bank directly. So he tells to one his servant, to deposit the amount in the bank.
2. SERVENT receives the order from the KING, then he writes an evelop and handover to POSTMAN to deposit the amount.
   1. In the envelop, he write two things,
      1. Deposit
      2. Amount of $500
3. POSTMAN receives the evelops from the servant and dispatched to the bank.
4. BANK MANAGER receives the envelop and update the account of the king and send backs to the KING.

Scenario 2 - Withdrawing the money

1. KING wants to withdraw some amount from his account. But he can't go to bank directly. So he tells to one his servant, to withdraw the amount from the bank.
2. SERVENT receives the order from the KING, then he writes an evelop and handover to POSTMAN to withdraw the amount.
   1. In the envelop, he write two things,
      1. Withdraw
      2. Amount of $100
3. POSTMAN receives the evelops from the servant and dispatched to the bank.
4. BANK MANAGER receives the envelop and update the account of the king and send backs to the KING.

Reducer

1. account object is have accountReducer.
2. users object is have usersReducer.

Adding package in Project

1. Create a folder with name of mkdir ~/app-name && cd app-name
2. Install Vite
   1. npm create vite@latest . && npm i
   2. npm install redux react-redux
3. Create a folder with name of store or state or reducer in the root src/[name] folder (ALL REDUX LOGIC IN THIS FOLDER).
4. Inside the store folder, create a reducer folder.
5. Now, create a accountReducer.js in reducer folder.
6. Now copy and paste code from the below.

   1. const reducer = (state = 0 , action) => {
        switch(action.type){
          case "deposit":
            return state + action.payload;
          case "withdraw":
            return state - action.payload;
          case default:
            return state;
        }
      }
      export default reducer;