Everything You Need to Know About Redux

---

It's a series of Redux. Hope you go through everything as Redux is not easy concept to understand if you are beginner and i am still beginner too but i have written this series to share my knowledge.
Why Redux?
I wrote the concept of Redux and why it has created by Redux team.
Introducing MVC architecture
MVC
MVC is a design pattern. The client sends the request to the controller > update the model according to the action > pass it to the view
When an action comes in, the controller receives and then update the data held by the model. After that, the changes are reflected in the view.
However, as the application gets bigger and bigger, its hard to figure out which model and view are intertwined.
The reason why we apply Flux over MVC?
Facebook had reported the cause of the alarm bug in the message app with two-way data flow. So to fix it, introduced Flux with one-way data flow.
What is Flux?
Flex is kind of abstract concept. To overcome MVC limitation, Facebook created an application architecture.
What is Redux?
It's a JS library that implement the flux architecture created by Facebook. A state management system for cross components or app-wide state.
Usage : Efficient data flow and state management between components
One thing to keep in mind
In order to update values immutably, your code must copy the existing objects as Redux expects that all state updates are immutably.
dispatch an action and that action trigger a reducer
Core redux concept

• Redux uses a "one-way data flow" app structure
  When something happens in the app:
  The UI dispatches an action.
  The store runs the reducers, and the state is updated based on what occurred.
  The store notifies the UI that the state has changed.
  The UI re-renders based on the new state.
  Redux Terms and Concepts
  Action
  An action is a plan JS object with type filed. It always has a type. The rest is payload.
  const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'buy milk' // additional info
  }
  Action creators
  A function that creates and return an action object
  Reducers
  A reducer is a function that receives the current state and an action object. To decide how to update the state and return the new state:
  function counterReducer(state = initialState, action) {// Check to see if the reducer cares about this actionif (action.type === 'counter/increment') {// If so, make a copy of statereturn {...state,// and update the copy with the new valuevalue: state.value + 1}}
  store
  The current Redux state lives in store. The store is created by passing in a reducer.
  dispatch
  The only way to update the state in redux store is call "store.dispatch()" and pass in an action object
  store.dispatch({type: 'counter/increment'})
  A example story
  You are at Domino Pizza shop! Hmm yummy! Customers are about to order a pizza with different toppings. All teams from management, chef, front cashier are need to know about that order data. Those data is stored in a central repository so it can be updated easily.
  {
  Type : "ORDER_PIZZA",
  payload : {
  Name: "Marie",
  Amount: "$30"
  }
  }
  3 Action types : Put an order, Make a pizza or Cancel the order
  Redux cycle(Pizza store)
  Action Creator -> Action -> dispatch -> Reducers -> State
  Customer order -> Pizza -> Machine -> Departments -> All order status data.
  Redux Cycle
  create a store

import { createStore } from "redux";
you can have only one store to manage the data.

1. dispatch the action
   Action is like what we want to do. Dispatch method send actions to the store.
   Actions (objects) MUST have TYPE property - what kind of action.
   Don't mutate the state - redux built on Immutability (copy)
   store.dispatch({ type: "ADD_TODO", text: toDo });
2. Handle a reducer & connect it
   Update the new state. Reducer is like a function that used to update store and have 2 arguments which are (state, action).
   state - old state/state before update
   action - What happened/ what update

Here's what a simple Reducer looks like:
function reducer(state, action) {
//return new state
}
To handle several action cases, we typically use switch statement below. By using a switch statement, you can handle different action types within your Reducer.

1. subscribe
   store.subscribe(paintTodos);
   You never mutate the state. but the only way to modify is to dispatch the action. Keep it mind that return new state objects, instead of mutating the previous state.
   never do like state.push(action.text),
   Do this by creating a new array
   return […state, {text: action.text}]
   The reason why we use filter() is that we should never ever mutate the array.
   filter() method creates a new array with all elements.

---

React-redux

The folder structure
reducer, actionsand store
Using React-redux, it provides Provider & Connect().
/actions -> Contains files to related to action creators
/components -> Files related to components
/reducers -> Files related to reducers
/index.js -> set up both react and redux.
Reducer is a pure function that changes the state. Whenever dispatch() method run, state re-updated. To handle these several reducers, we use combineReducers() of Redux package.
To create a store, we use createStore() method. Store provide state down to child component() with Provider. subscribe() and dispatch() methods will be there to notice the changes.
const render = () => {
ReactDOM.render(

document.getElementById('root')

)
};

---

Redux toolkit
Getting Started | Redux Toolkit
The Redux Toolkit package is intended to be the standard way to write Redux logic.redux-toolkit.js.org

---

Redux Middleware
redux-saga & redux-thunk
It was the most difficult part to understand for me.

---

Redux with TypeScript
Usage with TypeScript | React Redux
React Redux itself is currently written in plain JavaScript. However, it works well with static type systems such as…react-redux.js.org

---

Frequently asked questions
The differences between Context API and Redux

1. Why Redux over React Context API?
   Although they have similar purpose, React Context has some potential disadvantages like complex setup with bunch of nested JSX Code and performance. One of Redux team members said its still not ready for all Flux-like state propagation(change frequently). React context is not optimized for high-frequency state changes. React-Redux uses the Context api, so you always are using both together. Redux is for state management, Context is for propagating values down the render tree. Not the same thing.

---

Conclusion
I highly recommend you to watch this to summary everything

Reference
Redux Fundamentals, Part 2: Concepts and Data Flow | Redux
In Part 1: Redux Overview, we talked about what Redux is, why you might want to use it, and listed the other Redux…redux.js.org
Understanding Redux: The World's Easiest Guide to Beginning Redux
This is a comprehensive (but simplified) guide for absolute Redux beginners, or any who wants to re-evaluate their…www.freecodecamp.org
Please subscribe my channel
iDevBrandon
Welcome to my vlog! I am Brandon. I'd share my life journey how i grow up as a developer & investorwww.youtube.com