No comments Redux

Redux Architecture

     Redux is a state management library for managing and updating the application state, using events called actions. 
     The tools provided by redux make it easier to understand when, where, why, and how the state in the application is updated and how the application logic will behave when those changes occur.

Use-case of Redux:

  1. When there is a large amount of application state that needs to be used at multiple places in the app.
  2. When the state of the application updates frequently.
  3. When the state updating logic is very complex.
  4. Applications with the medium or large codebase.

     Redux architecture has three basic parts(store,reducer and actions).

Store:

     In redux, we store our application state inside a single javascript object called the store. this store object is the source for our application state & it is accessible by all parts of UI. What we can have inside the store is totally up to us we can have anything like arrays, objects, numbers, booleans. essentially anything that represents the data our application needs to function.

Rules for working with store:

  • we must not directly change or modify the state in the redux store because the redux is built on top of functional programming principles.
    Note: In functional programming we can’t mutate the state, hence we cant modify the store object directly.
  • To modify the state of the redux store we must create a plain action that describes “what to do” & then dispatch this action to the store.
  • when action is dispatched then redux store runs the root reducer, root reducer calculates the new state based on the old state and action.
  • Finally, the store notifies the subscriber using the subscribe function that state is updated & now UI can be updated with new data.

ex: store ={
       user:{}
    }

store.user = {id : 1,name : 'webdev99' }

Reducer:

1.To update the store we should create a function that takes the store as a argument and returns the update store.

 function reducer(store){
   conste updated={...store,{id:,name:}}
 }

    The above function is called a reducer. Reducer is a function that takes the current instance of the store and returns the updated store.

    Now updating the store is done but now we have another problem i.e what properties should the reducer update?

 store ={
 user:{},
 items:[],
 cart:{}
 }

    The above store has 3 properties user, items, and cart, now the reducer is confused about what properties should it update!!!

    To decide this we use actions 🙂

Actions:

     An action is just a plain javascript object that describes what just happened. based on the type of action, the reducer just comes to know what properties it should update.

     Now the reducer is modified as:

function reducer(store,action){
  //task to perform
 }

Do we need to create only one reducer?

Ans: Essentially not, because in the real-world application we have many scenarios where we need to use multiple reducers.

Summary :

Store: a single javascript object that includes our application state
actions: actions are plain javascript objects what just happened we can relate them with events because in programming event represents what just happened.
reducer: We also have 1 or more reducer each responsible for updating chunk of the store, we can relate reducers as event handlers but essentially they are not.

How these building blocks work together:

     when a user creates an action (a plain javascript object) & dispatch it to store. The store has the dispatch method which takes the action and then forwards it to the reducer(so we do not call the reducer directly we just work with the store), now the reducer computes the new state based on the action and returns it to the store. the store will set the state internally and then notify the UI component about the updated state.

    Now these ui components pull out the updated data refresh themselfs.

Why do we need to dispatch the action?

    dispatch is like an entry point to our store, so by dispatching the actions we are sending every action through the same entry point. so we have a central place where we can control what should happen when everytime user performs the action.

    This controlling help us in:
1.logging every action (this is how the redux dev tool works).
2. undo and redo mechanism.

Leave a Reply