Rematch — Redux Without the Boilerplate

Introduction

Rematch is a framework that wraps Redux with a model-based API, removing the need for action type constants, action creators, and switch-case reducers. Each model defines its state, reducers, and async effects in a single object, and Rematch generates the underlying Redux store automatically.

What Rematch Does

• Simplifies Redux setup with a model-based configuration object
• Auto-generates action types and action creators from reducer names
• Provides a built-in effects API for async operations without middleware boilerplate
• Supports plugins for loading states, persistence, and Immer-based immutable updates
• Works with React, Vue, Angular, or vanilla JavaScript

Architecture Overview

Rematch reads model definitions at initialization and generates a standard Redux store behind the scenes. Each model's reducers become Redux action handlers, and effects are wrapped as thunks. The dispatch object is augmented with typed methods matching each model's reducers and effects, so dispatch.count.increment() replaces dispatch({ type: "count/increment" }).

Self-Hosting & Configuration

• Install @rematch/core and optionally react-redux for React bindings
• Define models as plain objects with state, reducers, and effects keys
• Call init({ models }) to create the Redux store
• Add plugins like @rematch/loading for automatic loading state tracking
• Use @rematch/immer to write reducers with mutable syntax

Key Features

• Zero action type constants or action creator functions needed
• TypeScript support with full inference for dispatch methods and state shape
• Plugin system for cross-cutting concerns (loading, persistence, select)
• Compatible with existing Redux middleware and devtools
• Under 2 KB gzipped core with no required peer dependencies beyond Redux

Comparison with Similar Tools

• Redux Toolkit — Official Redux simplification; Rematch takes the reduction further with model-based API
• MobX — Observable-based reactivity; Rematch stays within the Redux ecosystem
• Zustand — Simpler standalone store; Rematch is a Redux wrapper with plugin support
• Effector — Event-driven state management; Rematch uses familiar Redux patterns underneath

FAQ

Q: Can I use Rematch with existing Redux code? A: Yes. Rematch creates a standard Redux store, so existing middleware, enhancers, and devtools work without changes.

Q: How do I handle async operations? A: Define async functions in the effects property of a model. They have access to dispatch and rootState and can call reducers directly.

Q: Does Rematch support React hooks? A: Yes. Use react-redux hooks (useSelector, useDispatch) with the Rematch store like any Redux store.

Q: Is Rematch still maintained? A: Yes. The project continues to receive updates and has an active community maintaining plugins and documentation.

Sources

• https://github.com/rematch/rematch
• https://rematchjs.org