问题标签 [redux]

我的通量应用程序显示一个列表位置。当用户点击一个位置时，它会变为“活动”。一次只能有一个活动位置。

位置状态应该是位置本身的属性（例如location.active）还是应该是全局状态的一部分，例如activeLocationId？

Redux框架使用reducer来更改应用程序状态以响应操作。

关键要求是reducer 不能修改现有的状态对象；它必须产生一个新对象。

不好的例子：

好例子：

这是Immutable.js的一个很好的用例。

长时间运行的进程应该在 react+redux 应用程序中“生活”在哪里？

举个简单的例子，考虑一个通过 websocket 发送和接收消息的类：

这个类的生命周期应该如何管理？

我的第一直觉是把它放在store：

但是，除了有点奇怪之外，也无法WebsocketStreamer访问该dispatch()功能，并且它会破坏热重载。

另一个潜在的解决方案是将其保存在全局某个地方：

但这具有明显的可测试性含义，并且也破坏了热重载。

那么，一个长期运行的进程应该在 react + redux 应用程序中的什么位置？

注意：我意识到这个简单的示例可以仅使用商店 + 操作提供程序来构建。但我特别想知道长期存在的过程在它们存在的情况下应该存在于哪里。

我正在开发一个地图应用程序。它由两个组件组成：

• 显示当前用户位置的组件；和
• 带有地址建议的地址搜索组件。

这些组件依赖于以下状态域：

当用户从地址建议列表中选择一个地址时，它会调用一个事件处理程序onSelectAddress。onSelectAddress需要触发两个状态变化：

• 设置userLocation到新位置；和
• 通知位置选择提示关闭

设计这个的正确方法是什么？

• 智能组件是否应该一个接一个地调度两个动作，一个调用USER_LOCATION_CHANGEchange ，另一个调用ADDRESS_SEARCH_HIDE；或者
• USER_CHANGE_LOCATION智能组件是否应该调度由两个不同的减速器处理的单个动作（例如）？

I just recently discovered Redux. It all looks good. Are there any downsides, gotcha or compromises of using Redux over Flux? Thanks

我的州

我有以下格式的项目数组：

[{ left: 0 }, { left: 10 }, { left: 20 }]

我可以{ left: 30 }在这个数组中添加一个项目：

[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 30 }]

{ left: 20 }我可以在这个数组中添加一个重复项：

[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 20 }, { left: 30 }]

我的观点

我必须在平面上的位置 x 处渲染这些项目，其中 x 是它们的左侧属性。

[{ left: 0 }, { left: 10 }, { left: 20 }]渲染|item1 item2 item3|

[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 30 }]渲染|item1 item2 item3 item4 item5|

当有重复时，我必须通过向左或向右移动元素来解决这种重复。所以

[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 20 }, { left: 30 }]渲染|item1 item2 item3 item4 item5|

所以它们不应该重叠。

我可以一个一个地添加新项目，其中新项目可以具有任何 10 的左属性倍数。

如果发生重叠，项目应通过右移来解决重叠问题。

这可能导致多个项目向右移动。

例子：

[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 20 }, { left: 30 }, { left: 40 }]

解决这个问题需要用左属性 30 和 40 移动这两个项目。它变成

[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 30 }, { left: 40 }, { left: 50 }]

项目的移动必须进行动画/补间。如何在 React 和 Flux 架构中强制执行此要求？

A. 通过调整模型的左侧属性来解决商店内的重叠问题，用补间反映视图中的变化。- 如何在 React 组件中反映对补间的更改？- 如何解决重叠问题？

我正在尝试使用Redux构建一个复杂的全动态应用程序。我的意思是我的应用程序有很多动态生成的表单，其中包含动态生成的字段组件。我也想在我的 Redux-store 中存储关于我的组件的可视化数据。但是如果不将真实数据与可视组件数据混合，我应该怎么做呢？

例如，如果我有这样的结构

渲染组件很困难，因为我需要先搜索视觉数据，然后在两棵树中反应组件“值”。

但如果有类似这样的结构：

你看到了问题，现在我在表单小部件的真实数据中有可视数据。

（表单-数据-widget1-视觉）

真实数据中的可视化数据超出了这个概念。

你们如何解决混合数据的相同问题？

真的对不起我糟糕的英语。我希望我清楚地解释了这个问题。

使用 redux 在商店中更新嵌套数据数组的最佳/正确方法是什么？

我的商店是这样的：

我有一对更新完整items对象的异步操作，但我还有另一对要更新特定links数组的操作。

我的减速器目前看起来像这样，但我不确定这是否是正确的方法：

我正在使用 Redux 和 React 开发一个大型应用程序，我决定制作一些可重用的组件，例如自定义复选框和单选按钮。

由于我想将此信息存储到 Redux 存储中以便能够轻松地调试应用程序的状态，并且相同的组件在任何地方都具有相同的功能，因此为每个组件创建减速器和操作似乎是个好主意。

然而，Redux reducer 返回一个新状态并将其保存在 store 中，并以 reducer 的名称作为键，这禁止在同一页面中使用相同的操作和 reducer 但保持不同状态的多个相同类型的组件。

我认为这个问题有两种解决方案：

• 为我使用的每个组件创建不同的 action 和 reducer，即使组件和它的功能是相同的。这种解决方案似乎不是一个好的解决方案，因为会有很多冗余代码。

• 创建具有足够参数的操作，以便能够区分 reducer 中的每个操作，并且只更改指定状态的一部分。

我选择了第二个选项。

CheckBox 组件的操作文件：

CheckBox 组件的 Reducers 文件：

我block用来指定页面，name指定特定组件的名称（例如性别）和状态，以及具有新状态的对象。

但是这个解决方案也有一些问题：

• 无法指定每个组件的初始状态，因为状态的键是动态的。
• 许多嵌套状态使存储结构复杂化。
• 按组件而不是表单聚合数据，这会使调试复杂化，并且在逻辑上是不正确的。

我没有足够的使用 Redux 和 React 的经验来想出一个更好的解决方案来解决这个问题。但在我看来，我遗漏了一些关于 React-Redux 关系的重要内容，这引发了一些问题：

• 将这个可重用组件的状态存储到 Redux 存储中是个好主意吗？

• 将 React 组件与 Redux 操作和减速器绑定在一起我错了吗？

我希望我的基于 React 的 SPA 在服务器端呈现（现在不是）。因此，我想将 React 与react-router、redux和一些构建层（如isomorphic starterkit ）结合起来。

有hapi 通用 redux将所有内容连接在一起，但我正在为如何组织我的流程而苦苦挣扎。我的数据来自 REST API 的多个端点。不同的组件有不同的数据需求，应该在客户端及时加载数据。相反，在服务器上，必须获取特定路由（组件集）的所有数据，并将必要的组件呈现为字符串。

SOME_DATA_ARRIVED在我的第一种方法中，我使用 redux 的中间件来创建异步操作，它加载数据、返回一个承诺，并在承诺解决时触发一个操作。Reducers 然后更新我的商店，重新渲染组件，一切都很好。原则上，这是可行的。但后来我意识到，在路由开始发挥作用的那一刻，流程变得很尴尬。

列出许多数据记录的某些组件具有多个链接来过滤记录。每个过滤后的数据集都应该可以通过它自己的 URL 访问，例如/filter-by/:filter. 所以我使用不同<Link to={...}>的组件来改变点击时的 URL 并触发路由器。然后路由器应该根据当前 URL 表示的状态更新存储，这反过来会导致相关组件的重新呈现。

这并不容易实现。我componentWillUpdate首先尝试触发一个操作，该操作异步加载我的数据、填充存储并导致我的组件的另一个重新渲染周期。但这在服务器上不起作用，因为只支持 3 种生命周期方法。

所以我正在寻找组织这个的正确方法。从用户角度更改应用程序状态的用户交互应更新 URL。IMO 这应该使路由器以某种方式加载必要的数据，更新存储，并启动协调过程。

所以interaction -> URL change -> data fetching -> store update -> re-render。

这种方法也应该在服务器上工作，因为从请求的 URL 中应该能够确定要加载的数据，生成initial state并将该状态传递给storeredux 的生成。但我没有找到一种方法来正确地做到这一点。所以对我来说，出现了以下问题：

1. 我的方法是错误的，因为有些东西我还不明白/不知道吗？
2. 在 redux 中保持从 REST API 加载的数据是否正确store？
3. state让组件保留在 redux 中并由store其他人自己管理是不是有点尴尬state？
4. 有这个想法是interaction -> URL change -> data fetching -> store update -> re-render错误的吗？

我愿意接受各种建议。