Rematch 传送门：https://rematch.gitbook.io/handbook/
Rematch 是 Redux 的包装器，它提供了更简单的 API，而不会失去任何可配置性
为什么要创建Rematch
Redux 实际上可能比将全局对象作为状态更易于开发。
将 Redux 视为具有前/后更新挂钩的全局对象，以及“减少”下一个状态的简化方法
但是 Redux 是不是太复杂了
Redux 本质上是一个简单的小型库，学习曲线陡峭。对于每一个在深入了解函数式编程的过程中克服并从 Redux 中受益的开发人员来说，都有另一个潜在的开发人员迷失了并认为“这不适合我，我要回到 jQuery”。
您不需要理解什么是使用 jQuery 的“comonad”，也不需要理解函数式组合来处理状态管理。
任何库的目的都是通过抽象使更复杂的东西看起来简单。
重新设计 Redux
Redux 值得重写。
- 设置
让我们看一下左侧真实世界Redux 示例中的基本设置。
image.png
很多开发者都在这里停了下来，刚迈出第一步，茫然地凝视着深渊。什么是重击？作曲？一个函数甚至可以做到这一点吗？
考虑 Redux 是否基于配置而非组合。设置可能看起来更像右边的例子。
-
简化的减速器
Redux 中的 Reducers 可以使用 switch 摆脱我们已经习惯的不必要的冗长 switch 语句。
image.png
假设一个 reducer 匹配 action 类型，我们可以反转参数，这样每个 reducer 都是一个接受状态和一个 action 的纯函数。也许更简单，我们可以标准化动作并只传递状态和有效载荷。
- 在 Thunk 上异步/等待
Thunk通常用于在 Redux 中创建异步操作。在许多方面，thunk 的工作方式似乎更像是一个聪明的黑客，而不是官方推荐的解决方案。在这里关注我：
- 你调度一个动作，它实际上是一个函数而不是预期的对象。
- Thunk 中间件检查每个动作，看它是否是一个函数。
- 如果是这样，中间件将调用该函数并传入一些存储方法的访问权限：dispatch 和 getState。
真的吗？将一个简单的动作动态类型化为对象、函数甚至 Promise 是不是不好的做法？
就像右边的例子，我们不能只是 async/await 吗？
- 两种Action
- Reducer action:触发reducer并改变状态state
- Effect Action: 触发异步动作。这可能会调用 Reducer action，但异步函数不会直接更改任何状态。
区分这两种类型的动作会更有帮助，而且比上面的“thunks”用法更容易混淆。
- 不再使用Action Types 作为变量
Action Creator 和 Reducer 是同一枚硬币的两面
const ACTION_ONE = 'ACTION_ONE'是action creators和Reducer的多余副作用。将两者合二为一，不再需要导出Action Types
-
Reducers 是 Action Creator
按使用情况对 Redux 的元素进行分组，您可能会想出一个更简单的模式。
image.png
可以从减速器自动确定动作创建者。毕竟，在这种情况下，reducer 可以成为 action creator。
完整的栗子：
目的
Redux 是一个出色的状态管理工具，有健全的中间件生态与出色的开发工具。
Rematch 在 Redux 的基础上构建并减少了样板代码和执行了一些最佳实践。
说得清楚点，Rematch 移除了 Redux 所需要的这些东西：
- 声明 action 类型
- action 创建函数
- thunks
- store 配置
- mapDispatchToProps
- sagas
Rematch
- model
import { init } from '@rematch/core'
const count = {
state: 0,
reducers: {
upBy: (state, payload) => state + payload
}
}
init({
models: { count }
})
- 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 （最佳实践）
- store
import { createStore, combineReducers } from 'redux'
// devtools, reducers, middleware, etc.
export default createStore(reducers, initialState, enhancers)
- Action Type
export const COUNT_UP_BY = 'COUNT_UP_BY'
- Action Creator
import { COUNT_UP_BY } from '../types/counter'
export const countUpBy = (value) => ({
type: COUNT_UP_BY,
payload: value,
})
- 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
}
}
- view
import { countUpBy } from '../actions/count'
import { connect } from 'react-redux'
// Component
const mapStateToProps = (state) => ({
count: state.count,
})
connect(mapStateToProps, { countUpBy })(Component)
参考：https://hackernoon.com/redesigning-redux-b2baee8b8a38
https://rematch.gitbook.io/handbook/