目的

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