TL; DR

Question

TL; DR

是否有一个库可以在Elm-Union Types JavaScript和Redux中创建类似ImmutableJS的内容？

观

嗨！

我是Redux的新手，仍在探索最佳模式。我花了一些时间学习Elm，在Elm中，整个应用程序的核心焦点是Model。

Elm的核心原则是制作无错误的应用程序。与JavaScript相比，Elm包含基本类型（String，List，Boolean ...），因为它也是静态类型语言。另一方面，您可以使用ImmutableJS和Flow并在JavaScript中获得相当数量的完整类型和类型检查，这使得它非常均匀。

但Elm和JavaScript之间的对比带有一个名为Union Types的功能。使用Union Types，您可以说：

type alias User = {
  name: String
}
type Session = LoggedOut | LoggedIn User

这意味着我们在会话方面有两个选择：

没有会话，我们也没有关于该用户的信息。
用户已通过身份验证，我们知道该用户是谁。

在处理"HOC"时，这非常有用，我们可以简单地说：

case session of 
  LoggedOut ->
    displayLoginButton
  LoggedIn user ->
    displayUser user

此外，您可以在获取数据时使用相同的模式。获取数据时，状态为Fetching，一旦获取状态，状态为Fetched Data，如果出现错误，状态为FetchingError Error。

这使得数据非常安全且非常干净。 JavaScript/Redux中写的同样问题通常会被解决：

const model = {
  loading: false,
  loaded: false,
  error: null,
  data: null
}

首先，这似乎是正常的，但您认为可以看到"impossible"情况可能会遇到。例如：

const model = {
  loading: true,
  loaded: true,
  error: null,
  data: null
}

数据无法加载并同时加载！

问题

有没有办法用JavaScript-Redux实现类似的概念，仍然是ImmutableJS的不变性？或者，如果有一种方法可以重新排列模型，以便在Redux中使不可能的状态？

P.S。

在榆树中谈论这个："Making Impossible States Impossible" by Richard Feldman

Answer 1

不，没有专门内置到React或Redux中的功能。这种事情在语言层面更多。您可能希望查看TypeScript或Flow以添加有助于此的静态类型。除此之外，您可以使用显式状态机方法或仔细的减速器逻辑检查将某些东西组合在一起。

我的React/Redux links list有一个关于static typing tools的部分，可能对入门很有帮助。此外，由于您提到了“加载状态”示例，我列表中的React and Ajax类别专门链接到几篇文章，讨论如何在TS，Flow和其他几种解决方案中处理该概念。

Answer 2

你可以像这样破解：

const Session = {
  LOGGED_IN: user => ({ type: 'LOGGED_IN', user }),
  LOGGED_OUT: () => ({ type: 'LOGGED_OUT' })
}

switch (session.type) {
  case 'LOGGED_IN': {
    viewUser(session.user)
  }

  case 'LOGGED_OUT': {
    viewLoginButton()
  }
}

Redux - 让不可能的国家变得不可能

TL; DR

观

问题

P.S。

2 个答案: