# Rematch — Redux Without the Boilerplate

> A lightweight framework built on Redux that eliminates boilerplate by providing a simple model-based API for state, reducers, and effects.

## Install

Save in your project root:

# Rematch — Redux Without the Boilerplate

## Quick Use
```bash
npm install @rematch/core
```
```ts
import { init } from "@rematch/core";

const count = {
  state: 0,
  reducers: {
    increment: (state: number) => state + 1,
    decrement: (state: number) => state - 1,
  },
  effects: (dispatch: any) => ({
    async incrementAsync() {
      await new Promise((r) => setTimeout(r, 1000));
      dispatch.count.increment();
    },
  }),
};

const store = init({ models: { count } });
store.dispatch.count.increment();
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-d35a2503
Author: AI Open Source