What is Redux framework and uses with React

Basically everybody want to know that What is Redux framework and uses with React. So you can say that Redux is one of the most popular framework for front end development. It is a predictable state container for JavaScript application. It is used for the entire applications state management and has consistent behavior for different environments (client, server, and native). Easy testing way available application and it has reducers, middleware, store enhancers.

There are three principal of Redux.

  1. Single source of truth
  2. State is read-only
  3. Changes are made with pure functions

Single source of truth : The state of your entire application is stored in an object tree within a single store.

State is read-only : The only way to change the state is to emit an action.

State is read-only : To specify how the state tree is transformed by actions.

If you want to add Redux to your application. Then, you need to run below npm commands.

If you are using yarn package manager then you can use this.

Actions :

Actions are payloads of information that send data from your application to your store. It is a plan javascript object and must have a type property that indicates the type of action. It define in string constants. If you want to send actions to the store using store.dispatch().
Creating a actions:

Action Creators :

All Action Creators are basically the functions that create actions. As like below

Reducers :

Reducers specify how the application’s state changes in response to actions sent to the store. Actions are only describe that what happened , It don’t describe how the application’s state changes. Reducers takes previous state and an action. It returns the next state.

Handling Actions :

We have already discussed inside Reducers section that reducer is a pure function that takes the previous state and an action, and returns the next state.

The type of function you would pass to Array.prototype.reduce(reducer, ?initialValue). It’s very important that the reducer stays pure. Things you should never do inside a reducer:

  1. Mutate its arguments
  2. Perform side effects like API calls and routing transitions
  3. Call non-pure functions, e.g. Date.now() or Math.random()
Store :

A store holds the all state tree of your application and store is not a class. It’s only an object with a few methods.

  1. getState(); – Returns the current state tree of your application
  2. dispatch(action); – Allows state to be updated
  3. subscribe(listener); – Registers listeners and handles unregistering of listeners
  4. replaceReducer(nextReducer); – Replaces the reducer currently used by the store to calculate the state.
Categories: React

Leave a Reply

Be the First to Comment!

Notify of
Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.