Redux in React

28 December 2021

What is React Redux?

Redux is an open-source JavaScript library, used for managing the appliance state. It helps components to manage the state in an efficient way.

Redux is a centralized store for the state that need to be used across the whole application, with the rules that ensures that the state must be updated only during a predictable fashion.

Why React Redux?

The main reason to use React-Redux are:

• For react Applications, React Redux is the official UI binding. It is always kept up-to-date with any API changes to make sure that your React components act needless to say.
• It implements many performance optimizations internally, which allows to components re-render only it’s necessary.
• Redux helps you to manage “global” state. Global state is the state that’s needed across many parts of your application.
• Redux helps you affect shared state management, but like all tool, it’s tradeoffs.

Redux Architecture:

STORE:

A Store may be a place where the whole state of your application lists. It manages the status of the appliance and features a dispatch (action) function. The center of each Redux application is that the store. 

A “store” could also be a container that holds your application’s global state. Whenever we declare a store in Redux, we’d like to specify the reducer.

The Redux store brings together the state, actions, and reducers that structure your app.

• Allows access to the present state via store.getState();
• Allows the state to be updated via the shop .dispatch(action);
• Registers listener callbacks via the store.subscribe(listener);

ACTION:

Action is dispatched from the methods which are payloads that can be used or read by Reducers. It is a pure object created to store the knowledge of the user’s event. It includes information like sort of action, time of occurrence, location of occurrence, its coordinates, and which state it aims to vary.

It carries a payload of the data from application to store. const ITEM_REQUEST = ‘ITEM_REQUEST’; apart from this sort attribute, the structure of an action object is completely upon the developer.

The Redux store doesn’t care what the particular text of the action.type field is. However, your own code will check out action.type to ascertain if an update is required.

REDUCER:

Reducer reads or uses the payloads from the actions then updates the store via the state accordingly. It is a pure function to return a replacement state from the initial state.The action describes what happened and it’s the reducer’s job to return the new state-supported that action. It may seem simple, but it does need to be a pure function with no side effects.Reducers are the functions which take this state and an action as an argument and return a replacement state result.