How to Integrate Redux with React AEM

Hello everyone! Today we will focus on how to integrate successfully REDUX with REACT and AEM. This article intends to answer what is a state machine, how Redux implements it, and finally, we will give a practical example.

Why there exists a need for creating a finite state machine?
User interfaces can be expressed by two things:
– The state of the UI
– Actions that can change the status

User interfaces react to the user and other sources and change their status accordingly. This concept is not only related to technology; it is a fundamental part of how all things work. This is a concept we can apply to develop better interfaces and it is based on a deterministic finite state machine.

As a result, we need to define what is a finite state machine and then, we will see how Redux implements it.

What is a finite state machine?
A state machine is a useful way to model behaviors in an application for each action, there is a reaction in the form of a state’s change.

There are five parts in a finite state machine to be considered:
– A set of states (for example, created, loading, success, error, etc.).
– A set of actions (for example, LOADING DATA, ACCEPT, CANCEL, etc.).
– An initial state (for example, created).
– A transition function (for example, transition (created, LOADING DATA) == ‘loading’)
– Final states (not needed it on Redux)

The deterministic finite state machines (which is what we are going to implement) also have some restrictions:

– There is a finite number of possible states.
– There is a finite number of possible actions (these are the “finite” parts).
– The application can only be one of these states at a time.
-Given a current state and an action, the transition function should always return the same next state (this is the “deterministic” part).

How does REDUX implement this deterministic finite state machine?
By definition, Redux is just a predictable state container for JavaScript applications. The set of states is stored in an object tree within a single STORE. This makes it easier to debug an application and to do a faster development. This state is read-only, so to change the state we will have to do it through ACTIONS, by doing it in this way we ensure that the VIEW never modifies the state, but expresses its intentions to mutate. REDUCERS are used to specify how the state will change for the actions, reducers are pure functions which receives the previous state and the action to be performed and returns a new state of the application, instead of modifying the previous state.

ACTIONS:
The status of our application will only change if we execute an action. An action is a simple plain JavaScript object that describes a change. Just as the state is the minimum representation of the data in our app, the action is the minimum representation of the change in the data. Any action should always have a type of property; whose value is different from undefined. Each app will have its own actions defined to describe the changes in the state.

REDUCERS
The reducer is the function that every Redux application has, it will return always a new state and receives as parameters a state and action to be executed.

STORE:
It is the center of our application, it stores the current state of the application and allows us to execute actions to modify the state.

The store has three main methods:
getState (): Returns the current state of the store.
dispatch (): The most common. Shoot actions to change the state.
subscribe (): It is a callback that will be called with each dispatch.

How we integrate Redux with React?
Once we have the presentation component made by React we have to connect it to Redux. We do this through a container, which is nothing more than a React component that uses the store subscribe method to read a part of the Redux state tree, providing the properties to the renderer presentational component. The easiest way to do this is through the connect () function of the React-Redux library which already provides lots of useful optimizations to avoid unnecessary re-renders.

The connect() allows us to connect basically 2 functions:
mapStateToProps: Indicates how to transform the current state of the Redux store into the presentation component’s props.
mapDispatchToProps: It allows us to define what actions we are going to execute on the reducer. This method receives the dispatch () method and returns the callback props that you want to inject into the presentation component.

Once you have your SPA + React project, to integrate Redux just add the dependency on the package json:

And when you run npm install, the Redux will be installed.

Redux Architecture
USE CASE
Imagine that we have an insurance company, where we have to show a list of all the insurances associated with a user that has recently logged in the application. Once the insurance’s list is displayed, we also want to save the particular insurance that the user has selected on the list. We already have done the application on react and we want to add Redux to store the insurances and the particular insurance selected by the user. On one hand, we have a react component (Item.js) that shows the data of particular insurance and on the other hand, we have the List.js which will be responsible for obtaining and storing the data from Redux and instantiate the items lists.

Item.js (It is just a react component that has the item data to be shown on the UI)

Import connect to use the function mapStateToProps and MapDispatchToProps to mapping the Redux state into the component’s props and to dispatch the reducer actions. Also, we import the two actions that we are going to call. The first one, loadInsurances, will call and endpoint to obtain all the insurance of the current user and store the data into Redux, while the second one, setCurrentInsurance, will save on the Redux’s state what insurance has been clicked by the user.

Import MapTo to map the AEM component author dialog with the actual component.

It is called after the initial render when the client received data from the server and before the data is displayed in the browser. It will dispatch the Redux’s action that has been set on mapDispatchToProps.

The particular Insurance being clicked is saved on the Redux state by performing the reducers action setCurrentInsurance.

For each Insurance, instantiate the React component “Item” and pass the data (title, description, click method) as props.

Here we are getting the data named “insurances” which is on the reducer state and setting it as a prop.

We are mapping these two actions as props, so the component can call the reducer actions inside the component.

Mapping the actual component with the AEM component (author dialog) and connecting with Redux to get the state and dispatch the actions.

Dispatch the reducer to save the insurances obtained from the server (endpoint call).

Dispatch the reducer to save the current instance that has been selected by the user.

getInsurances(externalCode) will call and endpoint to get the insurances of the user (is not part of this tutorial to explain how to call the endpoint). The external code is the token that has been previously saved on Redux when the user has logged in.

Initialize the redux state with the desire data.

Here is where the data is stored on Redux. Returns a new state which is the actual state plus the new data added.

We hope this post helps you to integrate Redux with your existing AEM + React Application.

Source: https://www.conexiogroup.com/how-to-integrate-redux-with-react-aem/