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

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;
  }
}

我需要像数组一样使用它的属性名称动态访问流派属性，如下所示：

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 链接的一些关于不可变数据处理的文章。

Answer 2

immutability-helper 是一个非常有用的状态更新库。在您的情况下，它将像这样使用，如果没有现有项目，它将创建一个新数组，或者如果有预先存在的项目，则将现有项目与操作列表连接：

import update from 'immutability-helper';

const defaultState = {
  genres: {}
}

const createOrUpdateList = (prev, list) => {
   if (!Array.isArray(prev)) {
       return list;
   }
   return prev.concat(list);
   // or return [...prev, ...list] if you prefer
}

export default function(state = defaultState, action) {
  switch(action.type) {
    case 'ADD_GENRE':
      return update(state, {
          genres: {
              [action.name]: {
                  $apply: prev => createOrUpdate(prev, action.list)
              }
          }
      });
    default:
      return state;
  }
}