以不可变的方式更新嵌套在对象中的数组

Question

所以我有这个减速器，我想更新

import { fromJS } from 'immutable';
const initialState = fromJS({
  searchParams: {
    limit: 100,
    page: 1,
    order_by: 'name',
    filters: {
      and_keywords : []
    }
  },
})

当触发动作时，我想将一个对象推入 and_keywords 的数组中。到目前为止我所做的是这个

case ADD_KEYWORDS:
return state
    .setIn(['searchParams', 'filters', 'and_keywords'], '123');

我也试过了

case ADD_KEYWORDS:
return state
    .updateIn(['searchParams', 'filters', 'and_keywords'], arr => arr.push('123'))

根据 https://facebook.github.io 中的文档，但我似乎无法使其工作。执行此命令后未发生任何变化

Answer 1

您的 updateIn 版本应该可以工作：

const Immutable = require('immutable')

const initialState = Immutable.fromJS({
  searchParams: {
    limit: 100,
    page: 1,
    order_by: 'name',
    filters: {
      and_keywords : []
    }
  },
})

const newState = initialState.updateIn(['searchParams', 'filters', 'and_keywords'], arr => arr.push('123'))

console.log(newState)

您的 setIn 版本代码只要稍微修改一下就可以正常工作：

const Immutable = require('immutable')


const initialState = Immutable.fromJS({
  searchParams: {
    limit: 100,
    page: 1,
    order_by: 'name',
    filters: {
      and_keywords : []
    }
  },
})

const newState = initialState.setIn(['searchParams', 'filters', 'and_keywords'], initialState.getIn(['searchParams', 'filters', 'and_keywords']).push('123'))

console.log(newState)

两者都应该输出：

Map { "searchParams": Map { "limit": 100, "page": 1, "order_by": "name", "filters": Map { "and_keywords": List [ "123" ] } } }

以不可变的方式更新嵌套在对象中的数组

update an array nested in an object in an immutable way

reactjs

immutable.js