Rematch
Rethink Redux.
Rematch is Redux best practices without the boilerplate. No more action types, action creators, switch statements or thunks.
Index
- Getting Started
- Purpose
- Examples
- Migration Guide
- API Reference
- Recipes
- Plugins
- Inspiration
Getting Started
npm install @rematch/core
Step 1: Init
init configures your reducers, devtools & store.
index.js
const 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.
models.js
const count = state: 0 // initial state reducers: // handle state changes with pure functions { return state + payload } effects: // handle state changes with impure functions. // use async/await for async actions async { await this }
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:
- What is my initial state? state
- How do I change the state? reducers
- 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.
// state = { count: 0 }// reducers // state = { count: 1 }dispatchcount // state = { count: 2 } // effects // state = { count: 3 } after delaydispatchcount // state = { count: 4 } after delay
Dispatch can be called directly, or with the dispatch[model][action](payload)
shorthand.
Examples
import React from 'react'import ReactDOM from 'react-dom'import Provider connect from 'react-redux'import init from '@rematch/core' // State const count = state: 0 // initial state reducers: // handle state changes with pure functions { return state + payload } effects: // handle state changes with impure functions. // use async/await for async actions async { await this } const store = // View const Count = <div> The count is propscount <button =>increment</button> <button =>incrementAsync</button> </div> const mapState = count: statecount const mapDispatch = count: increment incrementAsync const CountContainer = Count ReactDOM
Migrating From Redux
Moving from Redux to Rematch involves very few steps.
API
See the @rematch/core API
Like this project? ★ us on Github :)