オブジェクトプロパティを状態の別のプロパティに追加するにはどうすればよいですか？

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

減速変更、その後、次のアクションを受け入れる必要がありますそれに応じて状態：

// 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

あなたは正しい道を歩いていますが、ネスティングの各レベルを別々に処理する必要があります。

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にリンクしている不変のデータの取り扱いに関する記事の一部を読むことをお勧めします：ここで私はhttp://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.htmlのために書いた例です。

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