【问题标题】:Redux and XState for data store and React integrationRedux 和 XState 用于数据存储和 React 集成
【发布时间】:2020-08-29 10:52:54
【问题描述】:

我的大部分 React 应用程序都使用 Redux

我想我会开始使用 XState,因为我不必一直使用效果作为插件。

而且我认为是一个更完整的模式。

我想了解的一件事是它与 React(钩子和类)的联系以及它与一般反应式编程的交互:

我可以(并且应该)以同样的方式使用 XState context 作为 Redux 数据存储,在 React 组件 方式?我的组件是否能够“connect”和“mapToPropsXState 上下文并仅在这些值更改而不是每次状态机状态更改时重新呈现?

据我了解,Redux 缺乏副作用,因此它可以遵循纯函数式范式。但这与使用副作用有关,例如在网络应用程序或游戏中需要很多次。

提前致谢!

【问题讨论】:

    标签: reactjs redux xstate


    【解决方案1】:

    如果你愿意,XState 基本上可以在 Redux(或其他状态管理库)中管理你的全局状态,但它不会像 Redux 那样取代与 React 的连接。您应该将其视为 Redux 的扩展,并且您仍然需要遵循 Redux 中使用的模式,但使用 XState 来执行它们。几个例子:

    • Redux 状态可以表示为任何东西,因此它可以是 XState 机器状态 + XState 机器上下文。
    • Redux 操作基本上应该触发 XState 机器转换。它们还可以触发异步操作 (https://xstate.js.org/docs/guides/communication.html#invoking-promises),因此您可能不需要像 redux-thunk 这样的东西来处理它。您的操作将变得更加简单,但实际操作已转移到机器上。
    • Redux reducer 通常返回一个新状态,因此它们是 XState 转换的结果。

    您可能会找到一种将所有这些连接在一起的方法(最近用 Vuex 做了类似的事情)。 XState 机器只是从 Redux 实体调用的单例,但您不会将机器“嵌入”到 Redux 中。

    您还需要像以前一样使用react-redux 工具,并且机器永远不会真正暴露于实际的 React 组件(除非您也想使用 XState 机器来处理本地状态)。

    【讨论】:

    • 但是我不能只制作一个 HOC 来做与 react-redux connect() 相同的事情并映射 XStatesend 和部分 context到 React 的 props?或者在 XState 上有更好的方法来做到这一点? XState 本身似乎已经与 Redux Dev 工具很好地集成了。
    • @Ruid'Orey 你可以复制react-redux 所做的事情。 connect 方法实际上并没有那么多,您可以重新实现它并将其与底层的 XState 挂钩,而不是 Redux 存储。您最终仍会围绕它重新实现相当多的东西并确保它有效。更简单的方法肯定是简单地将 Redux 核心功能包装在 XState 周围,让状态机完成繁重的工作,而 Redux 基本构建块只是围绕它的一个薄层,并确保您的应用程序对更改做出反应。
    • @TorstenEngelbrecht - 我一直在努力理解如何为我的所有数据使用 xstate 上下文,但现在我意识到你的回答,我们仍然在 xstate 之外管理我们的数据,但应用程序状态是在 xstate 中正确吗?
    • @Neil 在一定程度上。 XState 机器并不是真正存储数据的东西,而是主要用于定义数据的“转换”。假设您有数据 a、b 和 c 的状态 X,机器为您提供了一种确定性的方式来定义您转换到状态 Y 后数据的样子,比如说 a'、b' 和 c'。存储数据并使其在应用程序范围内可访问不是在机器内部,必须由您正在使用的解决方案(例如 Redux、Vuex 等)处理。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-05
    • 2020-08-26
    • 2018-09-24
    相关资源
    最近更新 更多