将 React 组件放入 reducer 来管理状态更新？答案

【问题标题】：Putting React components in reducer to manage state updates?将 React 组件放入 reducer 来管理状态更新？
【发布时间】：2017-06-23 22:21:03
【问题描述】：

我正在设计一个导航控制器（大致基于此的移动版本：https://developer.apple.com/documentation/uikit/uinavigationcontroller

我想允许视图集合的推送和弹出功能（用户可以从中导航）。问题是，我在哪里存储我的组件集合。

例如，如果我执行如下操作：

export function pushViewController(view) {}

我可以将它推送到具有类似视图状态集合的 reducer 中（显然，在这样做的同时创建一个新的状态切片，而不是实际上“推送”以避免混淆我在这里改变状态）：

const initialState = { views: [<View />] }

我做了一些阅读，但对于这在 Redux 中这是否是“好的”做法，我看到了不同的意见。以这种方式推动观点甚至是正确的形式吗？希望对此提供一些意见，在此先感谢。

【问题讨论】：

完全没问题。请记住，您不能出于本地存储目的或其他目的序列化该状态，但对于正在运行的应用程序来说，它是完全“正确的”。

标签： reactjs redux state reducers

【解决方案1】：

没有。这技术上是可能的，但在几个层面上是个坏主意。

首先，your Redux state should be only serializable JS values。

其次，假设您正在谈论 React 组件，您会将描述性对象放入存储中，而不是对实际组件实例的引用。

第三，那些 React 描述性对象本身使用 Javascript 符号，它们是不可序列化的。

现在，可以的变体类似于 Dan Abramov 在How can I display a modal using Redux? 中描述的技术。

【讨论】：

所以我想我的下一个问题是：我们如何让这样的事情发生。然后我会尝试将视图添加到控制器的道具中吗？如果我们正在制作一个可以动态添加视图的控制器，那么在哪里保持对反应视图“集合”的引用的正确位置。
嗯，第一个问题是我从未使用过 RN 或“导航控制器”。其次，一个普通的 React 应用程序很少获得对组件实例的真正引用——你只需渲染 UI 的描述并让 React 处理更新。您可能想要浏览其他库的源代码，例如 github.com/react-community/react-navigation 。此外，有关其他 RN 导航库的信息，请参阅 youtube.com/watch?v=tWitQoPgs8w 和 medium.com/the-react-native-log/…。
是的，这是一个奇怪的项目（我不知道这个评论部分是否是讨论的地方）。从技术上讲，我什至不是在编写 RN 应用程序，而是一些具有移动“类似”功能的 Web 组件。
我想提炼一个更简单的问题：允许用户按下按钮并即时生成新的反应组件的“正确”形式是什么，我应该在哪里轻松存储它们使用权？我觉得我的方法在传统上都被认为是“不好的做法”。
取决于“生成新的 React 组件”的含义。如果您的意思是“显示现有组件B 而不是A”，那么只需渲染<B /> 而不是<A />。如果您的意思是实际动态定义新的 React 组件类，那通常不是一个好主意。感觉你的问题是基于对 React 的误解。你可能想花更多时间阅读 React 是如何工作的。您也可以在 Discord 上的 Reactiflux 聊天频道中提问，地址为 reactiflux.com。