Best Practices for Optimized State Management in React Applications

With increase in size and complexity of applications, managing the data in an application is also getting complex everyday. So to tackle this, we have a lot of state management libraries out there which can help state management in our application a lot easier.

Today in this article I will talk about a very useful library which can make state management and a developer life so easy. We will be discussing a Rematch.
Now you may wonder what is a Rematch? Don’t worry just be with me and we will discuss every aspect of the Rematch.

This article is for Frontend developers who are looking to explore state management libraries. We’ll explore the principles and features of the React Rematch library.

What is State Management?

State management is a way to communicate and share data across the components of an application. It provides you with a data structure that represents your application state that you can read and write.

In React applications state is a javascript object that is a part of a component and can be changed based on the events or user actions. You can also call state as a memory of a component.

Why do We Need Rematch over Redux?

As a developer at any point of time in your life you might have heard of or worked with Redux, which is the most popular state management library used in React applications. It is a state container which manages the application state within a single global object called store.

But there are few cons while working with Redux:

Lack of Encapsulation: There is no possible way to encapsulate data in the Redux library. So security issues may increase with the size of the application.

Restricted Structure: The Redux has predefined structure, which is restricted with very minimal alternatives.

Excessive Memory Usage: To update a state the reducer needs to always return a new state, this leads to more memory usage.

More Complex: Layering the manipulation logic in actions and reducers is a bit complex.

Time Consuming: For small applications, Redux can be time consuming as it requires more boilerplate.

What is a Rematch ?

Rematch is a state management wrapper built on the top of the Redux, and it uses best practices of Redux. With a Rematch we do need require any actions, reducers, switch statement or thunk.

Let’s start from the ground and find out how we can use Rematch in our application step by step.

1. Installation

So the very first thing we need to do is install the Rematch in our application. It’s very simple, we just need to run a npm command.

npm install @rematch/core

2. Define Models

Models are nothing but just a container that contains state, reducers and async actions. It tells us what we are going to have in our Redux store and how it changes.

Before creating a model we need to ask ourselves some questions.

• What should be my initial state ?
• How do I change the state ?
• How do I handle async actions ?

Let’s create a sample model:

export const number = {
state: 0, //initial state
reducers: {
// functions to handle state change
add(state, payload) {
Return state + payload;
}
},
effects: (dispatch) => ({
// handling async actions 
async addAsync(payload, rootState) {
await new Promise((resolve) => {
setTimeout(resolve, 1000);
}
dispatch.count.increment(payload);
}
})
}

3. Initialize Store

To initialize a store we need to call the init method which can build a fully configured Redux store.

Import { init } from “@rematch/core”;
Import number from “./models”;


const store = init ({ number }); //here the store is created

export default store;

4. Dispatch Actions

Dispatch helps us to trigger reducers and effects which we have just created from any component. Like Redux we need not to specify the action types and action creators.

const { dispatch } = store;

// dispatch.modelName.method
dispatch.number.add(1);

dispatch.number.addAsync(1)

5. View

Rematch can be used with native Redux integrations;

Import React from “react”;
Import ReactDOM from “react-dom”;
Import { Provider, connect } from “react-redux”;
Import store from “./store”;

Const sampleComp = (props) => {
<div>
The sample number is {props.number}
<button onClick={props.increment}>Add</button>
<button onClick={props.addAsync}>AddAsync</button>

</div>

Const mapState = (state) => ({
Number: state.number;
})

Const mapDispatch = (dispatch) => ({
Add: () => dispatch.sampleModel.add(1),
AddAsync: () => dispatch.sampleModel.add(1),

});

Const container = connect(mapState, mapDispatch)(sampleComp)

ReactDom.render(
<Provider store={store}>
</CountContainer>
</Provider>,
document.getElementbyId(‘root’);
);

Advantages of Rematch

• More features
• Provides a clean architecture for developers
• Reduces boilerplate
• Includes a persistor to persist the data
• No configurations needed
• Built-in side effects support
• Support dynamically adding reducers
• Allows to create multiple stores