purpose.md

Purpose

Redux is an amazing state management tool, supported by a healthy middleware ecosystem and excellent devtools.

Rematch builds upon Redux by reducing boilerplate and enforcing best practices.

To clarify, Rematch removes the need for:

• declared action types
• action creators
• thunks
• store configuration
• mapDispatchToProps
• sagas

Comparing Redux & Rematch

A comparison of Rematch & Redux may help clear things up.

Rematch

1. model

import { init } from '@rematch/core'

const count = {
  state: 0,
  reducers: {
    upBy: (state, payload) => state + payload
  }
}

init({
  models: { count }
})

2. View

import { connect } from 'react-redux'

// Component

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

const mapDispatchToProps = (dispatch) => ({
  countUpBy: dispatch.count.upBy
})

connect(mapStateToProps, mapDispatchToProps)(Component)

Redux (best practices)

1. Store

import { createStore, combineReducers } from 'redux'
// devtools, reducers, middleware, etc.
export default createStore(reducers, initialState, enhancers)

2. Action Type

export const COUNT_UP_BY = 'COUNT_UP_BY'

3. Action Creator

import { COUNT_UP_BY } from '../types/counter'

export const countUpBy = (value) => ({
  type: COUNT_UP_BY,
  payload: value,
})

4. Reducer

import { COUNT_UP_BY } from '../types/counter'

const initialState = 0

export default (state = initialState, action) => {
  switch (action.type) {
    case COUNT_UP_BY:
      return state + action.payload
    default: return state
  }
}

5. View

import { countUpBy } from '../actions/count'
import { connect } from 'react-redux'

// Component

const mapStateToProps = (state) => ({
  count: state.count,
})

connect(mapStateToProps, { countUpBy })(Component)

Scoreboard

	Redux	Rematch
simple setup ‎		‎✔
less boilerplate		‎✔
readability		‎✔
configurable	‎✔	‎✔
redux devtools	‎✔	‎✔
generated action creators	‎	‎✔
global dispatch	‎	‎✔
async	thunks	‎async/await