javascript - 如何将一个对象属性添加到状态中的另一个属性？

Question

我正在我的 react-redux 应用程序中设置操作和缩减器。我需要一个函数来更新状态中的属性并将对象添加到其列表中，如果可能的话使用传播语法。这是我到目前为止所拥有的:

const defaultState = {
  genres: {}
}

export default function(state = defaultState, action) {
  switch(action.type) {
    case 'ADD_GENRE':
      return {
        ...state,
        genres[action.name]: action.list //new code here
      }
    default:
      return state;
  }
}

我需要 genres 属性可以像数组一样使用其属性名称进行动态访问，如下所示:

const getMusicFromGenre = (genre) => {
  return state.genres[genre];
}

reducer 应该接受以下操作，然后相应地修改状态:

// action
{
  type: 'ADD_GENRE,
  name: 'Rock',
  list: ['Bohemian Rhapsody', 'Stairway to Heaven', 'Hotel California']
}

// old state
{
  genres: {
    "Pop": ['Billie Jean', 'Uptown Funk, 'Hey Jude']
  }
}

// new state
{
  genres: {
    "Pop": ['Billie Jean', 'Uptown Funk, 'Hey Jude'],
    "Rock": ['Bohemian Rhapsody', 'Stairway to Heaven', 'Hotel California']
  }
}

如有必要，我愿意使用不同的方法。

Answer 1

您走在正确的轨道上，但需要分别处理每一层嵌套。这是我为 http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html 写的一个例子:

function updateVeryNestedField(state, action) {
    return {
        ....state,
        first : {
            ...state.first,
            second : {
                ...state.first.second,
                [action.someId] : {
                    ...state.first.second[action.someId],
                    fourth : action.someValue
                }
            }
        }
    }
}

您可能还想阅读我在 http://redux.js.org/docs/recipes/reducers/PrerequisiteConcepts.html#immutable-data-management 链接的一些关于不可变数据处理的文章和 https://github.com/markerikson/react-redux-links/blob/master/immutable-data.md .