Redux: The Essentials

What is Redux?

Redux is an open-source JavaScript library for managing and updating an application state. It does so by sending events named actions. An application state is data stored in memory which is available to all its classes and components.

The location of this state is centralized and that allows every piece of an application to access the value of the application’s state. In Redux there are certain rules that ensure updates on the state are done in a predictable fashion. Redux exposes tools to make the state management of an application easier to update and retrieve.

Redux is a great library when there are many places on the application that are required to access the central state. It is also recommended to use Redux when the logic involved on updating the state is complex.

It is important to keep in mind that Redux is an opinionated library, meaning that it will ask your code to follow certain restrictions in order to access / modify the application state.

Redux State Management: Immutability

One of the keys to Redux’s success on state management is immutability. When JavaScript objects are immutable it means their values can’t be modified directly. So in order to update the state in Redux application, it creates copies of the current state and applies modifications to the copies.

The reason behind having an immutable object for managing the state is to ensure all components of an application use the same reference to the state. It is crucial for the state object to represent the same value across all pieces of an app. Otherwise there may occur inconsistencies between components.

Actions in Redux applications

Actions on Redux are the base for updating the state. They can be thought as events fired when user interacts with the application. As an example, when user clicks on a button an internal action gets triggered and the Redux state gets updated. In Redux, actions are JavaScript objects with the following structure.

const action = {
	type: 'user/new-message',
	payload: 'Hello World'
}

Redux stablishes some conventions to describe the actions inside an application. type is used to specify which type of action has been fired and its format is usually action-domain/action-name.

The payload property can be used to pass in data about the action that has been fired. For the example above, the action is a new message from a user and the payload stores the actual message that user has written.

It is recommended to use what Redux likes to call Action Creators. Those are methods that are going to generate a new action object so you can avoid writing those objects manually on each component. An example of an Action Creator function is:

// define the Action Creator method for a new message
const newMessage = message => {
	type: 'user/new-message',
	payload: message
}

// Use of Action Creator to create 2 new messages
const action1 = newMessage( 'Hi, this is the first message' );
const action2 = newMessage( 'I am the second message' );

In the following section we will see how the actions can be sent to update the state in a Redux application.

The Redux Store: Reducer, Dispatch and getState()

In Redux, the state tree of an application is stored in an object named store. A Redux store is not a class, it is a JavaScript object that exposes few methods that can be used to set or retrieve configurations from the state. To create a new store, you must pass a reducer method to it.

Reducer methods on Redux are functions that are used to update the state. They expect two parameters passed to them: state and action. A reduce is going to update the state object via an immutable operation based on the given action type. Reducer methods can apply many logic operations before updating the state, but those operations must be synchronous.

The Redux store object exposes the dispatch() method that is used to pass in an action and update the state of an application. When the dispatch function is called, the store is going to run its reducer and the state will get updated.

To retrieve the state of a Redux application you should use the getState() method exposed as part of the store object. getState() is going to return the state tree of an application which is equal to the last value returned by the store's reducer.

For large size applications where the state tree has complex nested levels, selector methods can be used to simplify the access to the state. Selectors are functions that will call the store’s getState() knowing how to extract information from the state tree structure. They are helpful to return a particular property or value from the state object. It is always easier to interact with selectors than with the full state.

What is Redux Toolkit?

Out of the box, the redux library requires you to manually set up the elements involved on management state: creation of store, reducers, action creators and so… That is why the Redux team released the Redux Toolkit, a powerful package that is intended to set the bases for writing standard Redux applications.

The Redux Toolkit package exposes some APIs that can be called from your code and benefit from built-in methods that are going to facilitate the management of the Redux state. Redux is backed up by a community of developers which makes improvements to the toolkit to ensure it is up to date.

References

• https://redux.js.org/introduction/getting-started
• https://daveceddia.com/react-redux-immutability-guide/
• https://daveceddia.com/why-not-modify-react-state-directly/
• https://redux-toolkit.js.org/introduction/quick-start
• https://www.reactiflux.com/
• https://discord.com/invite/0ZcbPKXt5bZ6au5t