rematch/rematch


A Redux Framework

https://rematch.gitbooks.io/rematch

License: MIT

Language: JavaScript

Keywords: angular, javascript, react, redux, rematch, vue


Getting Started

Build Status Coverage Status Codacy Badge npm version bundle size file size

Rematch

Rethink Redux.

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

Index

Translations

Getting Started

npm install @rematch/core

Step 1: Init

init configures your reducers, devtools & store.

index.js

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

const store = init({
  models,
})

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.

models.js

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))
      dispatch.count.increment(payload)
    }
  })
}

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({
  models,
})

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 => (
  <div>
    The count is {props.count}
    <button onClick={props.increment}>increment</button>
    <button onClick={props.incrementAsync}>incrementAsync</button>
  </div>
)

const mapState = state => ({
  count: state.count
})

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

const CountContainer = connect(mapState, mapDispatch)(Count)

ReactDOM.render(
  <Provider store={store}>
    <CountContainer />
  </Provider>,
  document.getElementById('root')
)

Examples

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 :)

Project Statistics

Sourcerank 15
Repository Size 4.13 MB
Stars 5,729
Forks 276
Watchers 97
Open issues 26
Dependencies 8,399
Contributors 72
Tags 74
Created
Last updated
Last pushed

Top Contributors See all

ShMcK Blair Bodnar Sam Richard Bruno Lemos Titouan CREACH Konstantin Piero Maltese Jan Cássio Tom Aranda arcthur Michał Lytek crazy4groovy Eric lin onetwo Daniel Cousens Edouard Eynard Sergio moreno Albert Kameron Tanseli Edouard Eynard Robin Millette

Packages Referencing this Repo

@rematch/typed-state
Rematch plugin for typechecking state
Latest release 0.1.0 - Published - 5.73K stars
@runningcodertest/rematch-loading
Loading indicator plugin for Rematch
Latest release 0.0.1 - Published - 5.73K stars
@runningcodertest/rematch-persist
Redux-Persist v5 plugin for Rematch. Provides simple redux state persistence using local storage ...
Latest release 0.0.4 - Updated - 5.73K stars
attamatch
A Redux Framework
Latest release 1.0.0 - Published - 5.73K stars
@kraken97/rematch-core
A Redux Framework
Latest release 0.6.0 - Published - 5.73K stars
rematch-core
A Redux Framework
Latest release 0.6.0 - Published - 5.73K stars
@rematch/immer
Redux-Immer plugin for Rematch. Provides immutable ability for rematch.
Latest release 1.1.0 - Updated - 5.73K stars
repaar
JS State-Management Combining Redux with Mobx
Latest release 1.0.2 - Updated - 5.73K stars
@rematch/core
A Redux Framework
Latest release 1.2.0 - Updated - 5.73K stars
@rematch/select
Selectors plugin for Rematch
Latest release 2.0.3 - Updated - 5.73K stars
@rematch/loading
Loading indicator plugin for Rematch
Latest release 1.1.2 - Updated - 5.73K stars
@rematch/persist
Redux-Persist v5 plugin for Rematch. Provides simple redux state persistence using local storage ...
Latest release 1.1.5 - Updated - 5.73K stars
@rematch/updated
Rematch plugin for maintaining timestamps when effects are called
Latest release 1.0.0-alpha.0 - Updated - 5.73K stars
@rematch/subscriptions
Rematch plugin for subscriptions
Latest release 0.1.0 - Published - 5.73K stars
@rematch/react-navigation
React Navigation plugin for Rematch
Latest release 2.0.2 - Updated - 5.73K stars
rematch-x
A Redux Framework
Latest release 0.0.0-alpha.0 - Published - 5.73K stars

Recent Tags See all

1.2.0 September 07, 2019
1.1.0 March 02, 2019
1.0.6 October 08, 2018
1.0.6 October 08, 2018
1.0.5 October 07, 2018
1.0.5 October 07, 2018
1.0.4 October 03, 2018
1.0.4 October 03, 2018
1.0.3 October 03, 2018
1.0.2 September 30, 2018
1.0.2 September 30, 2018
1.0.1 September 30, 2018
1.0.0 September 30, 2018
1.0.0-beta.5 June 28, 2018
1.0.0-beta.5 June 28, 2018

Interesting Forks See all

ng524/rematch
A Redux Framework
JavaScript - MIT - Updated - 1 stars
isholaomotayo/rematch
A Redux Framework
JavaScript - MIT - Updated - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2019-09-07 19:11:42 UTC

Login to resync this repository