如何在 React 组件中避免 Immutable.JS functions/accessors

Question

我正在使用 React 为 UI、Redux 管理状态和 Immutable.js 改变状态编写应用程序，但是，我想知道 如何避免在我的 React 组件中使用 Immutable.JS 访问器 ，例如 get() 或 getIn()。

我相信使用 Immutable.JS 访问器会感染我的 React 组件。如何避免这种情况？

Answer 1

如果您想保持它不可变，我认为您不会在这里有太多选择。您可以将其转换 toJS，但那样您将失去对象身份比较对重新呈现纯组件的好处。最好的选择可能是捂住鼻子假装它基本上是 JavaScript Map.

除此之外，如果您不依恋 Immutable.js，您可以考虑自己使用 seamless immutable which behaves a lot more like native JavaScript arrays and objects. Or you could go old-fashioned and just Object.freeze() 之类的东西。

Answer 2

避免 Immutable.JS 访问器并使用点符号的方法是使用 Immutable.JS 中的 Record 结构。

首先我们必须创建一个模板：

const MyTemplate = Record({
  id: 0,
  name: ''
})

...

case ContentFilterTypes.ADD_ITEM:
    return {
        listObjects : state.listObjects.push(new MyTemplate({
            id: action.item.id,
            name: action.item.description,
        }))
    }

要在演示中访问它，我们只需要设置我们想要获取信息的道具，如：

<ContentFilterAvatar id={value.id} name={value.name} />

如何在 React 组件中避免 Immutable.JS functions/accessors

How to avoid Immutable.JS functions/accessors inside React components

reactjs

immutable.js

redux

react-redux