Question

目前，我有以下对象结构定义为 STORE的初始状态

{
  counter: 0,
  messages: {
    newMessages: 25,
    inbox: 100
  }
}

这里我正在使用 immutableJS ，而在我的 reducer 中，如果我想修改状态，我将实现类似的内容：

function myReducer(state: Map<string, any>, action): Map<string, any> {
  switch (action.type) {
    case COUNTER_INCREMENT:
      return state.set('counter', state.get('counter') + 1);
    case INBOX_INCREMENT:
      return state.set(xxxx, yyyy + 1);
  }
  return state;
}

在修改像counter这样的简单属性时，我们可以使用简单的

state.set('counter', state.get('counter') + 1)

但是如果我们想修改像<{1}}这样的复杂/嵌套属性呢？ messages.inbox和xxxx值应该是什么？

Answer 1

如果您想为messages.inbox设置新值，请使用setIn：

return state.setIn(['messages', 'inbox'], 101)

如果您想根据messages.inbox的当前值为return state.updateIn(['messages', 'inbox'], inbox => inbox + 1设置新值，请使用updateIn：

class Motor:
    def __init__(self, motor):
         self.motor = motor

    def go_slow(self):
         self.motor.setval = 100

    def go_fast(self):
         self.motor.setval = 255

class Robot:
    def ___init___(self, reference_motor1, reference_motor2):
        self.motor1 = Motor(reference_motor1)
        self.motor2 = Motor(reference_motor1)

    def go_straight_slow():
         self.motor1.go_slow()
         self.motor2.go_slow()

    def go_straight_fast():
         self.motor1.go_fast()
         self.motor2.go_fast()

Answer 2

Immutable提供了一个setIn命令，通过该命令可以提供嵌套路径以及设置该路径的值。

来自Immutable docs：

const { fromJS } = require('immutable')
const nested = fromJS({ a: { b: { c: [ 3, 4, 5 ] } } })

const nested2 = nested.mergeDeep({ a: { b: { d: 6 } } })
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 6 } } }

console.log(nested2.getIn([ 'a', 'b', 'd' ])) // 6

const nested3 = nested2.updateIn([ 'a', 'b', 'd' ], value => value + 1)
console.log(nested3);
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 7 } } }

const nested4 = nested3.updateIn([ 'a', 'b', 'c' ], list => list.push(6))
// Map { a: Map { b: Map { c: List [ 3, 4, 5, 6 ], d: 7 } } }

没有为setIn直接提供示例，但我认为语义是相似的。可以找到here的文档。

如何使用ImmutableJS在Reducer上设置复杂/嵌套状态的属性？

2 个答案: