Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
130 lines (90 sloc) 2.24 KB

目的

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 }
})
  1. 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)
  1. Action Type
export const COUNT_UP_BY = 'COUNT_UP_BY'
  1. Action Creator
import { COUNT_UP_BY } from '../types/counter'

export const countUpBy = (value) => ({
  type: COUNT_UP_BY,
  payload: value,
})
  1. 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
  }
}
  1. 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 |

You can’t perform that action at this time.