用Valtio来取代Redux
这是一个实验性的想法。将Redux换成Valtio,可以很大程度上减轻项目的状态管理的复杂度。
Redux是一个很传统的状态管理库,它有很多优点,但也有一些不能忽视的缺点,比如模版代码太多、要写专门的reducer来更改状态等。
相比之下,Valtio的api更加灵活和神奇。Valtio使用es6的Proxy和Reflet,可以直接修改store,同时被其他订阅的组件感知到。我觉得这是使用Valtio最大的动力,去掉绝大部分的模版代码,不需要useAppSelector和slice来获取state,也不需要action和reducer来更改状态。
比如,它可以这样直接修改store。
const removeTodo = (index: number) => {
store.todos.splice(index, 1)
}
const toggleDone = (index: number, currentStatus: Status) => {
const nextStatus = currentStatus === 'pending' ? 'completed' : 'pending'
store.todos[index].status = nextStatus
}
同时,Valtio可以直接使用计算属性(compute,依赖于已有的state计算出的新的state),但是Redux做到这一点需要添加额外的库。
除此之外,Valtio更加容易上手,而且因为代码简单,所以测试/监视也更加容易。
但是,我觉得不能忽视的一点是改造成本,从现在的代码迁移到Valtio,需要去掉Reducer。在组件内部和Service之中,将dispatch换成直接修改store。虽然说,这些改动都不需要更改本质的逻辑,只是将dispatch换成直接的修改,可这也是不小的改动成本。
当然,好处也是很明确的,综合上面说的减少复杂度、简单上手,其实就是大大方便后续的开发,这是一个很需要权衡的问题。