×

Html & Html5

The World's best Software Development Study Portal



Redux-Overview


Redux is a predictable state container for JavaScript apps. As the application grows, it becomes difficult to keep it organized and maintain data flow. Redux solves this problem by managing application’s state with a single global object called Store. Redux fundamental principles help in maintaining consistency throughout your application, which makes debugging and testing easier.
More importantly, it gives you live code editing combined with a time-travelling debugger. It is flexible to go with any view layer such as React, Angular, Vue, etc.


In the above diagram,we can see a Redux Central Data Store in which all the data has to be stored and any component like App,Homeand Profile can easily fetch the required data from store directly.so,we can say that Redux makes the state management easy.

Now,Suppose we have to update or change any data in any component in redux. Then,we have to go through a process which is explained below with the help of a diagram:



As explained in the diagram,whole data is stored in Redux Central Data Store. In step1,tha data which we want to update or change,firstly we have to subscribe that and pass on to the component. Then In step2,component dispatch the action and to action we have to pass type and payload. In step3,we have to pass the action to reducer.Reducer is that main component of redux which is going to change the desired state. This is the whole process by which state of the store or of any component has been changed.

Principles of Redux


Predictability of Redux is determined by three most important principles as given below:

  • Single Source of Truth:
  • It helps to create universal apps. The state of the application is stored in one object tree called store. It means one app, one store.

  • State is Read-only(Immutability):
  • It means that we don’t change the state object and its properties directly. Instead of this make a new object, recalculate the new application state and update it with our newly created object. And this is important because all the changes are happening in the same place so everything is needed to be done in strict order and one by one.

  • Changes are made with pure functions(reducers):
  • To specify how the state tree is transformed by actions, you write pure reducers. A reducer is a central place where state modification takes place. Reducer is a function which takes state and action as arguments, and returns a newly updated state.



    When Should I Use Redux?


    Redux helps you deal with shared state management, but like any tool, it has tradeoffs. There's more concepts to learn, and more code to write. It also adds some indirection to your code, and asks you to follow certain restrictions. It's a trade-off between short term and long term productivity.

    Redux is more useful when:

  • You have large amounts of application state that are needed in many places in the app

  • The app state is updated frequently over time

  • The logic to update that state may be complex

  • The app has a medium or large-sized codebase, and might be worked on by many people


  • Note:Not all apps need Redux. Take some time to think about the kind of app you're building, and decide what tools would be best to help solve the problems you're working on.