目的

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