Rematch

The Redux Framework

Redux
rematch/rematchrematchjs.org@rematch/core

README

undefined


Getting Started

Chat on slackBuild StatusCoverage StatusNpm version[![Bundle size](https://img.shields.io/badge/bundlesize-5kb-brightgreen.svg?style=flat)](https://img.shields.io/badge/bundlesize-5kb-brightgreen.svg?style=flat)File size

Rematch


Rethink Redux.


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

- Why we created Rematch
- Video: Introducing Rematch
- A comparison of Redux & Rematch

Index


- Getting Started
- Purpose
- Examples
- Migration Guide
- API Reference
  - Core API
  - Init Redux API
  - Plugins API
- Recipes
  - Devtools
  - React
  - Vue
  - Testing
  - TypeScript
  - Immer
  - Decoupling reducers
- Plugins
  - Selectors
  - Loading
  - Persist
  - Updated
  - React Navigation
  - Immer
- Inspiration

Translations

- 中文手册

Getting Started


  1. ``` sh
  2. npm install @rematch/core
  3. ```
or
  1. ``` sh
  2. yarn add @rematch/core
  3. ```


Step 1: Init


init configures your reducers, devtools & store.

index.js

  1. ``` js
  2. import { init } from '@rematch/core'
  3. import * as models from './models'

  5. const store = init({
  6. models,
  7. })

  9. export default store
  10. ```

_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

  1. ``` js
  2. export const count = {
  3. state: 0, // initial state
  4. reducers: {
  5.   // handle state changes with pure functions
  6.   increment(state, payload) {
  7.    return state + payload
  8.   },
  9. },
  10. effects: dispatch => ({
  11.   // handle state changes with impure functions.
  12.   // use async/await for async actions
  13.   async incrementAsync(payload, rootState) {
  14.    await new Promise(resolve => setTimeout(resolve, 1000))
  15.    dispatch.count.increment(payload)
  16.   },
  17. }),
  18. }
  19. ```

_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.

  1. ``` js
  2. import { init } from '@rematch/core'
  3. import * as models from './models'

  5. const store = init({
  6. models,
  7. })

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

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

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

Step 4: View


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

  1. ``` js
  2. import React from 'react'
  3. import ReactDOM from 'react-dom'
  4. import { Provider, connect } from 'react-redux'
  5. import store from './store'

  7. const Count = props => (
  8. <div>
  9.   The count is {props.count}
  10.   <button onClick={props.increment}>increment</button>
  11.   <button onClick={props.incrementAsync}>incrementAsync</button>
  12. </div>
  13. )

  15. const mapState = state => ({
  16. count: state.count,
  17. })

  19. const mapDispatch = ({ count: { increment, incrementAsync } }) => ({
  20. increment: () => increment(1),
  21. incrementAsync: () => incrementAsync(1),
  22. })

  24. const CountContainer = connect(
  25. mapState,
  26. mapDispatch
  27. )(Count)

  29. ReactDOM.render(
  30. <Provider store={store}>
  31.   <CountContainer />
  32. </Provider>,
  33. document.getElementById('root')
  34. )
  35. ```

Examples


- Count: JS \| React \| Vue \| Angular
- Todos: React

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.

API


See the @rematch/core API

Changelog


See the CHANGELOG to see what's new.

Like this project? ★ us on GitHub :\)