What is Redux architecture in React?

Redux is a predictable state container for JavaScript applications. Redux derives its ideas from Flux architecture. So, in this article, we will see what is Redux architecture in React.

What is Redux architecture in React?

It is basically a flux-like approach to React applications. Redux doesn’t necessarily have to be used with React only, you can use it for AngularJS or JS too. But Redux works really well with React. Redux basically provides a way for managing the store, unidirectional flow of data, and much more. Flux architecture has multiple stores that are coordinated together by the dispatcher and when there is a change all the stores need to update themselves. But in Redux we have a single store. A single store that handles the entire application. Any changes to the store are done through actions.

Now, in Redux we have some functions which are called reducer functions. These functions basically take the previous state of the application and the action specified and generate the next state for the application. In Redux, changes in the state can only be made using these reducer functions. The previous state still remains intact and a new state is generate originated from the previous one.

Use of Redux:

• Time-travel debugging: In Redux you can always walk back and check the changes you have made to the states. Easy logging of states.
• Undo & Redo: While walking back you can always update/modify the states as required by you.
• A Single Source: Redux has only one single store which makes it really simple to understand.
• Reducer Functions: These functions generate a new state which is originated from the previous state and hence it helps to link all the states together
• Use of JS: In the reducer function along with the previous state, the action is specified. So, the action comprises a basic JavaScript Object which is called a Payload.
• immutability: When a new state is generated, the previous state remains as is and is not modified in any way.

Using a model called react-redux you can integrate Redux together with React. Now for this integration, we use the react-redux package. But here we will be covering only Redux. So as a first step, you need to install redux into your React application:

npm install redux --save

yarn add redux

Examples:

import {
  createStore
}
from 'redux'

function count(state = 0, action) {
  switch (action.type) {
    case 'INCR':
      return state + 1
    case 'DECR':
      return state - 1
    default:
      return state
  }
}
let sample_store = createStore(count)
sample_store.subscribe(() => console.log(sample_store.getState()))
sample_store.dispatch({
    type: 'INCR'
  }) //Output:1
sample_store.dispatch({
    type: 'INCR'
  }) //Output:2
sample_store.dispatch({
    type: 'DECR'
  }) //Output:1

Conclusion:

So, in this article, we have been through what is Flux architecture in React. Also, feel free to comment with your suggestions and feedback on the post. Moreover, at BOSC Tech Labs, we have a team of highly experienced React JS developers. They can assist you in developing your customized web app. So contact us to hire experienced ReactJS developers.

Book your appointment now