Unlock the Power of State Management with Rematch

In the fast-paced world of frontend development, managing state is crucial for building robust and scalable applications. With numerous libraries available, it can be overwhelming to choose the right one. That’s where Rematch comes in – a state management library that simplifies the process, making it easier to get started.

What is Rematch?

Rematch is built on top of Redux, offering a more streamlined approach to state management. It eliminates the need for complex configurations, boilerplates, and additional libraries like Redux Thunk. With Rematch, you can focus on building your application without worrying about the underlying state management complexities.

Key Features of Rematch

Rematch offers several notable features that make it an attractive choice for frontend developers:

• Easy Migration: Built on Redux, Rematch allows for seamless migration and code interoperability.
• Simplified Configuration: No need for complex configurations, boilerplates, or additional libraries.
• Built-in Side Effects: Supports native JavaScript async/await for calling external APIs.
• Custom Plugins: Exposes an API interface for creating custom plugins to extend its functionalities.
• TypeScript Support: Written in TypeScript, Rematch provides autocomplete for all methods, state, and reducers.
• Framework Agnostic: Works seamlessly with React, Vue, Angular, and more.

Getting Started with Rematch

To demonstrate the power of Rematch, let’s build a simple to-do application. First, install a new React app template and then install Rematch and React Redux.

npm install rematch react-redux

Defining Models

In Rematch, models bring together state, reducers, and async actions in one place. They provide a snapshot of your Redux store and how it changes. To create a model for our to-do app, we need to define the initial state, reducers, and async actions.

const todoModel = {
  state: {
    todos: []
  },
  reducers: {
    addTodo: (state, todo) => [...state.todos, todo]
  },
  effects: {
    async loadTodos() {
      const response = await fetch('/api/todos');
      return response.json();
    }
  }
};

Initializing the Store

By calling the init() method, you can build a fully configured Redux store with additional Rematch functionality. The store created has all the capabilities of a Redux store, including dispatch() and subscribe() methods.

import { init } from '@rematch/core';

const store = init({
  models: [todoModel]
});

Dispatching Actions

You can trigger reducers and effects in your models using dispatch, just like plain Redux. You can call dispatch directly or with the dispatch[model]action shorthand, allowing you to standardize your actions without writing action types or action creators.

store.dispatch.todo.addTodo({ title: 'Buy milk' });

Building the To-Do App

Let’s create two components, one for displaying to-do items and the other for creating to-do items. We’ll use the useSelector Hook from React Redux to access the store and display the to-do items. We’ll also use the useDispatch Hook to dispatch actions to create and delete to-do items.

import React from 'eact';
import { useSelector, useDispatch } from 'eact-redux';

const TodoList = () => {
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  return (

{todos.map((todo) => (
• {todo.title}

))}

  );
};

const TodoForm = () => {
  const dispatch = useDispatch();

  const handleSubmit = (event) => {
    event.preventDefault();
    dispatch.todo.addTodo({ title: 'New todo item' });
  };

  return (

  );
};