目的

Redux 是一个出色的状态管理工具，有健全的中间件生态与出色的开发工具。

Rematch 在 Redux 的基础上构建并减少了样板代码和执行了一些最佳实践。

说得清楚点，Rematch 移除了 Redux 所需要的这些东西：

• 声明 action 类型

• action 创建函数

• thunks

• store 配置

• mapDispatchToProps

• sagas

Redux 与 Rematch 的对比

让 Redux 与Rematch 作对比有助于让理解更加清晰。

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 （最佳实践）

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)

分数板

	Redux	Rematch
简易设置		√
更少的样板代码		√
可读性	√	√
可配置	√	√
redux 开发工具	√	√
产生 action 构造函数	√	√
全局分发器 (dispatch)		√
异步	thunks	async/await