Question

我正在使用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

我确定其他人已经解决了这个问题，并且我不想重新发明轮子。

Answer 1

您没看错。如果使用ImmutableJs，您应该做的是p.get('id')，那么另一种方法将类似于props.cats.map(elem => <Cat id={elem.get('id')} key={elem.get('id')}/>) 或IMHOP不太优雅的props.cats.map(elem=>elem.toJs()).map(Cat)，但做同一件事的方式却不同。

希望有帮助

Answer 2

可能与您的痛苦有关，我已经在此处记录了此内容-What are disadvantages to using immutable state in React?。

对于Redux

您可以使用mapStateToProps将不可变项转换为普通JS（state.toJSON()）。因此，应该从状态的实际结构中抽象出愚蠢的（不喜欢该术语）组件。

否则

这是您想要在状态库和视图之间抽象的任何地方的问题。我能够在某种程度上隔离这一点的一种方法是使用（镜头）[https://medium.com/@drboolean/lenses-with-immutable-js-9bda85674780]。如果它们看起来过于复杂，则可以制作一个get([key path], source)方法并将其作为props发送到组件，并使用它来获取值。这至少提供了一些抽象。

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

2 个答案:

对于Redux

否则