what is Redux?

3 Fundamental Redux Principle

What is Redux?

Redux is an open-source JavaScript library for managing and centralizing the application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to Facebook’s Flux architecture, it was created by Dan Abramov and Andrew Clark.

React Redux Main Concepts

  1. Action (What to do?)
  2. Reducer (How to do?)
  3. Store (objects which holds the state of the application)
  4. functions associated with store, createStore() dispatch(action) getState()

Action

Actions are the only source of information for the store as per Redux official documentation. It carries a payload of information from your application to the store. As discussed earlier, actions are plain JavaScript objects that must have a type attribute to indicate the type of action performed.

Reducer

In Redux, a reducer is a pure function that takes an action and the previous state of the application and returns the new state. The action describes what happened and it is the reducer’s job to return the new state based on that action.

Store

A store is an immutable object tree in Redux. A store is a state container which holds the application’s state. Redux can have only a single store in your application. Whenever a store is created in Redux, you need to specify the reducer. Let us see how we can create a store using the createStore() method from Redux.

what is Redux?

Single source of truth

The global state of your application is stored in an object tree within a single store.

Global state (store) Unlike React’s standard architecture, the components state isn’t stored in its component class (with exception to specific cases). All data from the view or received by API’s, databases or any other endpoint is stored in a single global object called the store. The goal of the store is to link each component property to one of its properties. This way, every time that a property data is updated, the component its rendered again using the new data instead.  

State is read-only: The only way to change the state is to emit an action, an object describing what happened.

Actions

“Actions are payloads of information that send data from your application to your store. They are the only source of information for the store.” – redux.js.org

That means that every time that you need to change a property data in the store, you need to dispatch an action. In a more technical description, actions are objects that contain a type property (responsible for informing the store about what kind of action it is supposed to execute) and the payload (the actual data to be altered). It is good practice to maintain all data (except the type) inside a single property called payload.

Changes are made with pure functions: To specify how the state tree is transformed by actions, you write pure reducers.

Reducers

Although actions can listen to events triggered by the user or by the app, they can’t change the state of our store. To make any change in the store, we need to use our middlemen, reducers. Every reducer listens to every action dispatched by the app. It is up to us to define which of these actions it needs to take into account and do something about.

Project Structure: It will look like the following:

Redux Principle

read more here

Conclusion

I hope the what is Redux? The solution would be useful for you to learn something new from this solution. If it helped you then don’t forget to bookmark our site for more Quiz Answers and solutions.

More Error Tutorials >>

Vue 3+VeeValidate – Form Validation Example (Composition API)

Vue 3+VeeValidate – Required Checkbox Example (Composition API)

Vue 3+Pinia-JWT Authentication Tutorial & Example

Leave a Reply

Your email address will not be published.

error: Content is protected !!