reactjs - React-Redux 应用程序中的不变性 - Immutablejs 和 Typescript 冲突

标签 reactjs typescript redux immutability immutable.js

Immutable.jsTypeScript 的结合存在问题,感谢您的意见:

在过去的一年里,我们正在开发一个 react-redux 应用程序。

正如几乎所有最佳实践、常识和 redux docs 中所推荐的那样,我们的商店数据是不可变的。

正如上面 redux 文档中所推荐的那样,正如许多大型项目中所使用的那样,以及许多正在实现的样板文件,我们正在使用 Immutable.js .

我们还在 TypeScript 中编写我们的应用程序.

问题是,这两个(Immutable.jsTypeScript)不能很好地发挥作用。一旦使用toJSgetgetIn将不可变对象(immutable对象)转换为普通JS对象,类型将更改为any,这破坏了商店和组件之间的类型安全。

我们尝试过

  1. Actor :

state.users.getIn(['counts', visits]) as number 但我们希望有更好的类型安全。

  1. 修复 Immutable.js 的输入:

我们也尝试过自己打字,有时会打到

interface ImmutableMap<T> {
 get<K extends keyof T>(name: K): T[K];
 set<S>(k: string, o: S): ImmutableMap<T & S>;
 getIn(searchKeyPath: any[], notSetValue?: any): T;
}

(想法来自 here )

假设 getIn 只用 toJS 调用并且总是返回一个 JS 对象(我们有时会在 higher-order-component 中这样做 - 但那是另一回事了) .

但这是废话和大 hack。 我们得出的结论是,我们自己无法修复 Immutable.js 的类型安全。*

  1. 原版:

我们尝试使用普通的对象传播,但是随着数据结构变得复杂,不可变对象(immutable对象)的合并变得过于复杂并生成了不可读的代码:

{
    ...state,
    profiles: {
      ...state.profiles,
      [id]: {
        ...state.profiles[id],
        meta: {
          ...state.profiles[id].meta,
          [sub]: payload,
        },
      },
    },

我们最终构建了另一个我们需要维护的 Immutable.js 库 - 太多代码无法支持。

关于记录选项

我们想避免使用 record - 它会在终端浏览器中产生一大堆 js 代码,只有 TypeScript 需要而用户不需要,维护起来很麻烦,并且最后不共享完整的、与纯 JS 对象相同的 API。我在过去的项目中使用过它,这是一次非常糟糕的经历。

问题

我的问题是针对那些创建/使用复杂的 React-Redux 应用程序的人:

  1. 有人遇到同样的问题吗?有使用 Immutable.jsTypeScript 的好的解决方案吗?
  2. 有人推荐更好的库/解决方案,以获得良好的不变性和类型安全性吗?

最佳答案

更新:

最终,经过一些基准测试和 facebook-groups 讨论,我们转换为 immer,我们不想回头看。很棒的解决方案 - 类型化、简单、对象是原生的,因此无需学习新的 API...我们很高兴。

关于reactjs - React-Redux 应用程序中的不变性 - Immutablejs 和 Typescript 冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48646183/

相关文章:

javascript - 取消之前的 promise

typescript - 类型 '{}' 不可分配给类型 'string'

reactjs - react : why static propTypes

reactjs - 如何处理 React 和 Redux 中的音频播放

javascript - 如何在基于类的组件中使用 `useSelector`? react ,还原

javascript - 检查变量是否是 React 节点或数组

javascript - 使用 children 方法在 props 中传输组件

javascript - Typescript 推断高阶函数的类型,该函数执行具有相同参数签名的可选函数参数

javascript - 对字符串中的所有数字进行四舍五入

reactjs - 在按钮的样式属性中 react Material UI 条件语句