当使用Immutable.JS时，redux选择器应该总是返回Immutable.JS对象吗？

Question

Redux团队建议使用selectors always return Immutable.JS objects .However，我发现当选择器的返回对象由状态的多个切片构造时，选择器很难返回Immutable.JS对象。

以shopping-cart官方demo为例。选择器getCartProducts使用购物车切片和状态的产品切片来构造返回的对象：

export const getCartProducts = state =>
  getAddedIds(state).map(id => ({
    ...getProduct(state, id),
    quantity: getQuantity(state, id)
  }))

在这种情况下，如果使用Immutable.JS，如何重新构造此选择器以使其返回Immutable.JS对象？

Answer 1

不要改变状态是很重要的，但是可以在没有Immutable.JS的情况下做到这一点

您不需要将Immutable.JS与Redux一起使用。如果编写正确，普通JavaScript完全能够提供不可变性，而不必使用不可变的聚焦类库。redux faq

Answer 2

如果您将使用不可变的JS对象并对其使用方法.map，它将返回新的ImmutableJs对象。

https://facebook.github.io/immutable-js/docs/#/Map/map

如果您有普通JS对象并希望将其转换为Immutable.js，可以使用帮助函数fromJS() https://facebook.github.io/immutable-js/docs/#/fromJS

let some = {foo: 'bar'};
let immutableObject = Immutable.fromJS(some);

所以有几个选择。

1. 确保您正在Immutable.js structure
2. 上运行map function原样运行，并在使用Immutable.fromJS()

完成从vanilla到Immutable.js的传输后按原样运行

Answer 3

如果你的整个redux状态是一个immutable.js对象，那么所有这些函数都将返回一个immutable.js对象。根据示例，getAddedIds(state)函数将返回一个Immutable.List，map函数将返回一个新的Immutable.List。由于您不应该将普通JS对象与Immutable.js对象混合在一起，因此这些列表中的对象也将是一个Immutable.js。

我尝试创建一个简单的示例来向您展示这些选择器的外观

​

const ids = [
  'a2ds2',
  'a3322asdda',
  '1d1w1s11x1'
];

const products = [{
  id: 'a2ds2',
  name: 'milk'
},
{
  id:'a3322asdda',
  name: 'bread'
},
{
  id:'b1d1w1s11x1',
  name: 'orange'
}
];

const cartItems = [
{
  productId: 'a3322asdda',
  qnt: 20
},
{
  productId: 'a2ds2',
  qnt: 3
}
]

const newState = Immutable.fromJS({
  ids, 
  products,
  cartItems
})

// returns an List of ids
const getAddedIds = (state) => state.get('ids').filter(id => id[0] === 'a')

// returns an product Map
const getProduct = (state, id) => state.get('products').find(product => product.get('id') === id)

// returns the qnt of a product
const getQntByProduct = (state, id) => state.get('cartItems').find(item => item.get('productId') === id).get('qnt')

// create the new List
const result = getAddedIds(newState)
  .map(id => getProduct(newState, id).set(
          'qnt', 
          getQntByProduct(newState, id)
        )
  )

console.log('result', result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>

​