Redux - rohit120582sharma/Documentation GitHub Wiki

An app is composed primarily of UI and State.

The root cause for any bug you’ve ever written, odds are that bug was caused because of state mismanagement. By increasing the predictability of your state, you decrease the amount of bugs in your application and improve the overall user-experience of the app.


Redux

Redux is a great pattern for centralizing state management with immutable data structures. This concept is called Single Source of Truth. Redux is all about simplifying how we store and update application state. It also ensures a one-directional flow, by making the state read-only.

The Store consists of our state tree and the three ways in which we’ll interact with it - getting it, updating it, and listening to its changes.

We need to install redux package to build the store and react-redux package that will help us to tie together react and redux.

$ npm install --save redux
$ npm install --save react-redux

References



Principals

Single Source of Truth

  • Redux uses only one store for all its application state. Since all state resides in one place, Redux calls this the single source of truth.
  • The store is created using createStore with one reducer function.

State is Read-Only

  • The only way to mutate the state is to emit an action, an object describing what happened. This means the application cannot modify the state directly.

Changes are made with Reducers

  • Reducers are Pure function which handle dispatched actions and can actually change the state.
  • Reducers are called each time actions are dispatched. Since the returned state from a reducer will become our new state in the store, Redux always expects reducers to return state.
  • Characteristics of a Pure Function:
    • Always return the same result if the same arguments are passed in
    • Depend only on the arguments passed into them
    • Not mutate its input state argument directly
    • Return any value besides undefined
    • Never produce any side effects


⚠️ **GitHub.com Fallback** ⚠️