Redux

How it works

This is how the Redux cycle looks like:

  1. Users interact with the interface and trigger an action

  2. Action with/without payload is sent to a reducer using the dispatcher

  3. Reducer checks if it handles the action and produces a new state based on the action and its payload

  4. State changes are notified via subscription methods

  5. UI renders again based on state changes received via the subscription method

Three Principles of Redux:

  • The state is the single source of truth for the application, represented as a single object tree in a single store.

  • The state is read-only and can only be altered by emitting an action that describes the change to be made.

  • Changes are made using pure functions that return the next state. The current state is never mutated in place.

Pros and Cons

When using Redux with React, states will no longer need to be lifted up. This makes it easier for you to trace which action causes any change. Everything is handled by Redux. This greatly simplifies the app and makes it easier to maintain.

Props:

  • Redux makes the state predictable In Redux, the state is always predictable. If the same state and action are passed to a reducer, the same result is always produced because reducers are pure functions. The state is also immutable and is never changed. This makes it possible to implement arduous tasks like infinite undo and redo. It is also possible to implement time travel — that is, the ability to move back and forth among the previous states and view the results in real time.

  • Redux is maintainable Redux is strict about how code should be organized, which makes it easier for someone with knowledge of Redux to understand the structure of any Redux application. This generally makes it easier to maintain. This also helps you segregate your business logic from your component tree. For large scale apps, it’s critical to keep your app more predictable and maintainable.

  • Debugging is easy in Redux Redux makes it easy to debug an application. By logging actions and state, it is easy to understand coding errors, network errors, and other forms of bugs that might come up during production. Besides logging, it has great DevTools that allow you to time-travel actions, persist actions on page refresh, etc. For medium- and large-scale apps, debugging takes more time then actually developing features. Redux DevTools makes it easy to taker advantage of all Redux has to offer.

  • Performance Benefits You might assume that keeping the app’s state global would result in some performance degradation. To a large extent, that’s not the case. React Redux implements many performance optimizations internally so that your own connected component only rerenders when it actually needs to.

  • Ease of testing It is easy to test Redux apps since functions used to change the state of pure functions.

  • State persistence You can persist some of the app’s state to local storage and restore it after a refresh. This can be really nifty.

  • Server-side rendering Redux can also be used for server-side rendering. With it, you can handle the initial render of the app by sending the state of an app to the server along with its response to the server request. The required components are then rendered in HTML and sent to the clients.

Cons:

  • additional dependency (increase bundle size)

  • more boilerplate (partially fixed by new Redux ToolKit)

  • could be overkill for a small project

  • needs additional time to learn

  • additional configuration is needed

Redux is most useful when in cases when:

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

  • The app state is updated frequently

  • 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

  • You need to see how that state is being updated over time

Last updated

Was this helpful?