我是redux的新手,并提出了一个看似错误的架构。我希望有人可以向我解释一个更好的方法来构建我的应用程序。
缺点是我想遵循将redux存储尽可能保持平坦的想法,但最终我得到了一个商店,它是一个巨大的物体对象。我只有1个减速器和1个动作。这对我来说似乎都是错的。但是,我的申请非常有限。
背景信息我正在设计一款可以通过蓝牙与医疗设备进行通信的应用程序。对于给定的屏幕,在渲染之前,我将需要获取感兴趣的数据项。设备上的数据项集是固定的并且事先已知。该应用程序仅仅是一个显示它们并可能更新它们的工具。
示例“信息屏幕”显示有关设备当前状态的信息。为简单起见,我们可以说屏幕只会在列中显示一些项目。这些物品是
我需要一次向一个数据项发送一个fetch命令到设备。然后,设备应该(在某个时刻)发送包含每个相关项目数据的响应。响应应更新存储,以便在mapStateToProps传递给connect时将这些项目提供。
商店的当前架构以及我如何从商店检索商品此时我觉得我的redux商店只是一个大数据库。由于我事先知道设备需要的所有数据项,所以我决定用所有这些数据项初始化状态。
{
volume: {amount: 30, units: ML},
rate: {amount: 30, units: ML},
interval: {amount: 20: units ML_PER_HOUR},
isIntervalEnabled: true
}
请注意,在此示例中,这些只是虚拟值,实际上,键将具有未定义的值,并且仅来自设备的响应和对商店的更新可以为项目赋值
我在一个看起来像这样的单独文件中为每个项创建了选择器。
const volume = (state) => state.volume;
const volumeSelector = createSelector([volume], (volumeObject) => volumeObject);
每个项目都有这种类型的结构。请注意,createSelector来自重新选择库。
在“设备信息”屏幕的底部,我有像这样的mapStateToProps函数
function mapStateToProps(state){
return {
volume: volumeSelector(state),
rate: rateSelector(state)
interval: intervalSelector(state)
isIntervalEnabled: intervalSelector(state)
}
}
(实际上我有30件物品可以从设备上获得)而且有些屏幕也不仅希望从设备获取信息而且还要向设备发送信息。为此,我写了这样的动作
actionUpdate(deviceItemId, propsToUpdate){
return {type: "Update", deviceItemId, propsToUpdate}
}
还有这样的减速机
updateRecuder(state, action){
const theProps = action.propsToUpdate
const theId = action.deviceItemId,
const updatedItem = <merge state[theId] with theProps>
return state merged with updatedItem
}
这意味着我有大约30个设备项1减速器1动作,这看起来完全不同于我在其他redux项目中看到的任何其他东西。从某种意义上说,我似乎只是将redux用作数据库。我在想
Redux非常灵活,可以让你做很多东西,比如拥有2个商店。根据我的理解,你做的一切都是正确的。如果它使代码更具可读性,请不要害怕制作更多的reducers和actions。
https://redux.js.org/basics/dataflow
只要你遵循数据流,你应该没问题:)