An Introduction to Redux’s Core Concepts

Tram Ho

Redux is a state repository for JavaScript applications and is a valuable tool for organizing state applications. It is a popular library for state management in React applications, but it can also be used with simple Angular, Vue.js or plain old vanilla JavaScript.

One thing that people find difficult about Redux is knowing when to use it. The bigger and more complex your application is, the more likely it is that you will benefit from using Redux. If you start working on an application and you know it will grow significantly, then you should start with Redux immediately so that your application changes and expands, you can easily implement these change that without refactoring a lot of your existing code.

In this brief introduction to Redux, we will go over the main concepts: reducers, actions, action creators and store. At first glance it may seem like a complicated topic, but the core concepts are actually quite simple.

What’s a Reducer?

The Reducer is a function that takes the old State and the Action as an argument and returns the new State. The action is an object with a type attribute and an optional attribute containing new status window information:

The Reducer specifies how to change the state of the application to be changed in response to actions sent from the Store.

Because the Reducer are pure functions, we do not change the arguments provided to it, such as making API calls, or calling non – pure functions like Math.random () or Date.now ().

* Pure functions are functions that receive input and return values ​​without modifying any data beyond its scope (Side Effect)

If your application has multiple State sections, then you may have multiple Reducer. For example, every major feature in your application might have its own Reducer. The Reducer only cares about the value of the State.

What’s an Action?

Acquisitions are simple JavaScript objects that represent data from your application to the Store. The action has a type attribute and an optional attribute that contains new status information.

Most changes in applications that use Redux start with an event triggered by the user directly or indirectly. Actions are usually sent using an Action creator.

What’s an Action Creator?

In Redux, Action creator is a function that returns an Action object. Action creator may seem like an unnecessary step, but it makes everything more flexible and easy for testing. The Action object returned from an Action creator is sent to all Reducer applications.

Depending on what the Action is, the Reducer may choose to return a new version of the State. The new properties in the returned State are then transferred to the application’s State, then transferred back to our React application, which then renders all components.

So, suppose the user clicks the button, then we call Action creator as a function that returns an Action. The action has a description type of action that has just been triggered.

And here, a simple Reducer related to Action has type = ADD_TODO:

All Reducer handles the Action. The Reducer does not care about the specific Action, but only returns the new State. Now all components are notified of changes to the State. After being notified, all components will render with the new props:

Combining Reducers

Redux provides us with a function called CombReducers that performs two tasks:

  • It creates a function that calls the Reducer with the part of the State selected according to its key.
  • Then it combines the results into an object again.

What is the Store?

In Redux, Store refers to the object that carries the Action (representing what happened) and the Reducer (the State updates according to those Actions) together. There is only one Store in the Redux application.

The store has several tasks:

  • Allow access to State through getState ()
  • Allow State to be updated via dispatch (action)
  • Keep the entire State application.
  • Register listener by calling subcribe (listener)
  • Unregister the listener via the function returned by the subcribe (listener

Basically all we need to create a Store is a Reducer. Use CombReducers to combine multiple Reducer into one. Now, to create a Store, we will import combineReducers and pass it to createdStore:

Then, we send the Action in our application using the dispatch method of the Store as follows:

Data Flow in Redux

One of the many benefits of Redux is that all data in an application follows the same life cycle pattern. The logic of your application is more predictable and easier to understand, because the Redux architecture follows a single data stream.

4 main steps of the data life cycle in Redux:

  • An event within your application will trigger a call to store.dispatch (actionCreator (payload)).
  • Store calls the original Reducer with the current State and Action
  • The original Reducer combines the outputs of multiple Reducer into a single State tree.

    When an Action is issued, the application will call both Reducer and combine both result sets into one State
  • The Redux Store stores the complete State tree returned by the original Reducer. The new State tree is now the nextState of your application.

Over ?

The article was translated from An Introduction to Redux’s Core Concepts

Share the news now

Source : Viblo