设计 redux 商店：什么是标准设计实践答案

【问题标题】：Designing the redux store: What are standard design practices设计 redux 商店：什么是标准设计实践
【发布时间】：2018-09-16 00:01:23
【问题描述】：

我是 redux 的新手，并且提出了一个似乎错误的架构。我希望有人可以向我解释一种更好的方式来构建我的应用程序。

简而言之，我想遵循使 redux 存储尽可能平坦的想法，但我最终得到了一个存储是一个巨大的对象对象。我只有 1 个减速器和 1 个动作。这一切对我来说似乎都是错误的。但是，我的应用程序非常有限。

背景信息 我正在设计一个应用程序，它将通过蓝牙与医疗设备进行通信。对于给定的屏幕，在渲染之前我需要获取感兴趣的数据项。设备上的数据项集是固定的并且是事先已知的。该应用程序只是用于显示它们并可能更新它们的工具。

示例 “信息屏幕”显示有关设备当前状态的信息。为简单起见，假设屏幕将仅在列中显示一些项目。项目是

音量
费率
间隔
isIntervalEnabled

我需要为每个数据项一次向设备发送一个获取命令。然后设备应该（在某个时候）发送一个响应，其中包含每个有问题的项目的数据。响应应该更新存储，以便这些项目在 mapStateToProps 传递给连接时可用。

商店的当前架构以及我如何从商店中检索商品 在这一点上，我觉得我的 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 模式

【问题讨论】：

标签： reactjs react-native redux

【解决方案1】：

Redux 非常灵活，可以让你做很多事情，比如拥有 2 个商店。据我了解，你做的一切都是正确的。如果它使代码更具可读性，请不要害怕制作更多的 reducer 和 action。

https://redux.js.org/basics/dataflow

只要按照数据流走就可以了：）

【讨论】：