React Redux

Redux is an open-source JavaScript UI library exercised to manage the web application state. React provides Redux for building the user interface. It was first developed by Dan Abramov and Andrew Clark in 2015.

React Redux is the official binding for react exercised Redux. It allows React UI components to read data from a react Redux Store, and dispatch actions to the Store to update the data. Redux helps web apps to scale by providing a sensible way to manage the react state through a unidirectional data flow model. React Redux is conceptually simple. It subscribes to the react Redux store, checks to see if the data which your component wants have changed, and re-renders your UI component.

Redux was inspired by Flux. Redux studied the Flux architecture and react omitted unnecessary complexity.

⦁ Redux does not have a Dispatcher concept.
⦁ Redux has only Store whereas Flux has many Stores.
⦁ The Action objects will be received and handled directly by redux Store.

Why use React Redux?

⦁ React Redux is the official UI binding for react web Applications. It is kept up-to-date with any API changes to ensure that your React UI components behave as expected.
⦁ It encourages good ‘React’ architecture.
⦁ It implements many performance optimizations internally, which allows to UI components re-render only when it actually needs.

Redux Architecture:

STORE: A Store is a place where the entire react to the state of your web application lists. It manages the status of the web application and has a dispatch(action) function. It is like a brain responsible for all moving parts in react Redux store.

ACTION: Action is sent or dispatched from the view which are payloads that can be read by react Reducers. It is a pure object created to react store the information of the user’s event. It includes data such as type of action, time of occurrence, location of occurrence, its coordinates, and which state it aims to change.

REDUCER: Reducer reads the payloads from the actions and then updates the redux store via the state accordingly. It is a pure function to return a new react state from the initial state.

Redux Installation:

$ npm install redux react-redux --save