Alternatives To Rematch
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
30 Days Of Javascript38,596
a day ago1January 19, 2022327JavaScript
30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace. These videos may help too:
Zustand35,519101,33615 hours ago113August 01, 20236mitTypeScript
🐻 Bear necessities for state management in React
Reactjs Interview Questions31,818
12 days ago18JavaScript
List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!
React Boilerplate29,238236 months ago1May 11, 2014116mitJavaScript
:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
React Redux22,974140,10817,9984 days ago126July 29, 202325mitTypeScript
Official React bindings for Redux
30 Days Of React22,796
3 days ago214JavaScript
30 Days of React challenge is a step by step guide to learn React in 30 days. These videos may help too:
React Redux Links21,729
a year ago31
Curated tutorial and resource links I've collected on React, Redux, ES6, and more
Normalizr20,9873,3886332 years ago43March 19, 202222mitJavaScript
Normalizes nested JSON according to a schema
Responsively App20,839
21 hours ago172agpl-3.0JavaScript
A modified web browser that helps in responsive web development. A web developer's must have dev-tool.
Js Stack From Scratch19,3962a year ago1January 19, 201748mitJavaScript
🛠️⚡ Step-by-step tutorial to build a modern JavaScript stack.
Alternatives To Rematch
Select To Compare

Alternative Project Comparisons

Getting Started

Chat on slackBuild StatusCoverage StatusNpm versionBundle sizeFile size


Rethink Redux.

Rematch is Redux best practices without the boilerplate. No more action types, action creators, switch statements or thunks.



Getting Started

npm install @rematch/core


yarn add @rematch/core

Step 1: Init

init configures your reducers, devtools & store.


import { init } from '@rematch/core'
import * as models from './models'

const store = init({

export default store

For a more advanced setup, see plugins and Redux config options.

Step 2: Models

The model brings together state, reducers, async actions & action creators in one place.


export const count = {
	state: 0, // initial state
	reducers: {
		// handle state changes with pure functions
		increment(state, payload) {
			return state + payload
	effects: dispatch => ({
		// handle state changes with impure functions.
		// use async/await for async actions
		async incrementAsync(payload, rootState) {
			await new Promise(resolve => setTimeout(resolve, 1000))

See the reducers docs to learn more, including how to trigger actions from other models.

Understanding models is as simple as answering a few questions:

  1. What is my initial state? state
  2. How do I change the state? reducers
  3. How do I handle async actions? effects with async/await

Step 3: Dispatch

dispatch is how we trigger reducers & effects in your models. Dispatch standardizes your actions without the need for writing action types or action creators.

import { init } from '@rematch/core'
import * as models from './models'

const store = init({

export const { dispatch } = store
// state = { count: 0 }
// reducers
dispatch({ type: 'count/increment', payload: 1 }) // state = { count: 1 }
dispatch.count.increment(1) // state = { count: 2 }

// effects
dispatch({ type: 'count/incrementAsync', payload: 1 }) // state = { count: 3 } after delay
dispatch.count.incrementAsync(1) // state = { count: 4 } after delay

Dispatch can be called directly, or with the dispatch[model][action](payload) shorthand.

Step 4: View

Rematch can be used with native redux integrations such as "react-redux". See an example below.

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider, connect } from 'react-redux'
import store from './store'

const Count = props => (
		The count is {props.count}
		<button onClick={props.increment}>increment</button>
		<button onClick={props.incrementAsync}>incrementAsync</button>

const mapState = state => ({
	count: state.count,

const mapDispatch = ({ count: { increment, incrementAsync } }) => ({
	increment: () => increment(1),
	incrementAsync: () => incrementAsync(1),

const CountContainer = connect(

	<Provider store={store}>
		<CountContainer />


Migrating From Redux

Moving from Redux to Rematch involves very few steps.

  1. Setup Rematch init with Redux step 1
  2. Mix reducers & models step 2
  3. Shift to models step 3

Migration from 0.x to 1.x

For an earlier version, see v0.x docs. Currently only displaying v1.x documentation.

Breaking changes with v1.0.0. Global imports of dispatch and getState have been removed. Instead, you can export and import your store, capturing store.dispatch, store.getState. See the Changelog for details.


See the @rematch/core API


See the CHANGELOG to see what's new.

Like this project? ★ us on GitHub :)

Popular Redux Projects
Popular Reactjs Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
React Redux
State Management