如何在 Redux 状态下访问对象数组中的属性？

Question

我对 Redux 很陌生，对如何更新嵌套状态感到困惑。

const initialState = {
    feature: '',
    scenarios: [{
        description: '',
        steps: []
    }]
}

我知道以不可变的方式推送到数组，我们可以这样做，

state = {
    scenarios: [...state.scenarios, action.payload]
}

并推入一个特定的属性，正如这个 SO 答案所暗示的那样 How to access array (object) elements in redux state，我们可以做

state.scenarios[0].description = action.payload

但我的问题是，我们如何在不提及索引的情况下访问对象数组中的特定属性？有没有办法让我们把它推到最后一个空元素？

欢迎所有建议帮助我理解，提前谢谢你:)

Answer 1

Redux 有助于解耦状态转换和呈现数据的方式。

修改你的数组只发生在你的 reducer 中。使用标识符很容易指定要修改哪个场景的描述。如果您的场景有 id，则应将其包含在您的操作中，例如

{
  "type": "update_scenario_description",
  "payload": {
    "scenario": "your-id",
    "description": "New content here"
  }
}

每个场景都可以有一个 reducer。所有场景的上级reducer都可以根据场景id将action转发给具体的reducer，这样只会更新这个场景。

在您的用户界面中，您可以使用场景数组和您的场景 ID 来仅呈现您当前正在查看的特定场景。

如需更详细的解释，have a look at the todo example。这基本上是一样的，因为每个 todo 都有一个 id，你有一个用于所有 todo 的 reducer，每个 todo 有一个特定的 reducer，由它的 id 处理。

Answer 2

除了公认的答案之外，我想提一点，以防有人仍然想“访问对象数组中的特定属性而不提及索引”。

'use strict'
const initialState = {
    feature: '',
    scenarios: [{
        description: '',
        steps: []
    }]
}
let blank = {}
Object.keys(initialState.scenarios[0]).map(scene => {
  if (scene === 'steps'){
   blank[scene] = [1, 2]
  } else {
   blank[scene]=initialState.scenarios[0][scene]
  }
})
const finalState = {
  ...initialState,
  scenarios: blank
}  

console.log(initialState)
console.log(finalState)

但是，如果initialState 的scenarios 属性不是数组内的对象，而是像scenarios:{description:'', steps: []} 这样的简单对象，则解决方案会简单得多：

'use strict'
const initialState = {
  feature: '',
  scenarios: {
      description: '',
      steps: []
  }
}

const finalState = {
  ...initialState,
  scenarios: {
    ...initialState.scenarios, steps: [1, 2, 4]
  }
}

console.log(initialState)
console.log(finalState)