时间戳

首页 > 解决方案 > 如何最好地将 Immutable.JS 列表发送到无状态的 React 组件中？

reactjs - 如何最好地将 Immutable.JS 列表发送到无状态的 React 组件中？

问题描述

我正在使用 Redux、Immutable.JS 和 React。我想将一个 Immutable.JS 列表传递给我的无状态 React 组件。此组件映射列表并为列表中的每个项目呈现一个子项。

例子：

function Cats(props) {

  function Cat(p) {
    return <li key={p.id}>p.name</li>;
  }

  return <ul>{props.cats.map(Cat)</ul>;
}

该{p.id}部分中断，因为props.cats是一个 Immutable.JS 映射列表，所以我必须更新我的 React 组件来{p.get('id')}代替。

我可以这样做，但是有没有更好的方法让无状态 React 组件使用列表而不必知道它是一个 Immutable.JS 列表？这种用法违反了 Redux + Immutable.JS + React 最佳实践中的最佳实践，“在除了你的哑组件之外的任何地方都使用 Immutable.JS”。1

我确定其他人已经处理过这个问题，我不想重新发明轮子。

标签： reactjsreduximmutable.js

解决方案

可能与您的痛苦有关，我在这里记录了这一点-在 React 中使用不可变状态有什么缺点？.

对于 Redux

您可以使用mapStateToProps将不可变对象转换为普通的 JS ( state.toJSON())。所以愚蠢的（不喜欢这个词）组件应该从你的状态的实际结构中抽象出来。

否则

这在您希望在状态库和视图之间进行抽象的任何地方都是一个问题。我能够在某种程度上隔离它的一种方法是使用 (lenses)[ https://medium.com/@drbolean/lenses-with-immutable-js-9bda85674780]。如果它们看起来太复杂，您可以创建一个get([key path], source)方法并将其发送到您的组件中，并使用它来获取值。这至少提供了一些抽象。

推荐阅读