変数を使用してレデューサーの状態を更新する

Question

私は、コンテンツのセクションをその状態に基づいて拡大/縮小する単純なアプリケーションを構築しています。基本的には、collapse = falseの場合はクラスを追加し、それが真の場合は別のクラスを追加します。

私はReduxでNext.jsを使用しており、問題が発生しています。私はアクションが渡される引数に基づいて状態を更新したいと思います。それは状態を更新していないので、私はなぜ、またはより良い代替手段があるか分からない。どんな清澄化も素晴らしいでしょう！

// DEFAULT STATE  
const defaultState = { 
    membership: 'none', 
    sectionMembership: { 
    id: 1, 
    currentName: 'Membership', 
    nextName: 'General', 
    collapse: false 
    }, 
    sectionGeneral: { 
    id: 2, 
    prevName: 'Membership', 
    currentName: 'General', 
    nextName: 'Royalties', 
    collapse: true 
    } 
} 

// ACTION TYPES 
export const actionTypes = { 
    SET_MEMBERSHIP: 'SET_MEMBERSHIP', 
    MOVE_FORWARDS: 'MOVE_FORWARDS', 
    MOVE_BACKWARDS: 'MOVE_BACKWARDS' 
} 

// ACTION 
export const moveForwards = (currentSection) => dispatch => { 
    return dispatch({ type: actionTypes.MOVE_FORWARDS, currentSection }) 
} 

// REDUCERS 
export const reducer = (state = defaultState, action) => { 
    switch (action.type) { 
     case actionTypes.SET_MEMBERSHIP: 
     return Object.assign({}, state, { 
      membership: action.membershipType 
     }) 
     case actionTypes.MOVE_FORWARDS: 
     const currentId = action.currentSection.id 
     const currentName = "section" + action.currentSection.currentName  
     return Object.assign({}, state, { 
      currentName: { 
      id: currentId, 
      collapse: true 
      } 
     }) 
    default: return state 
    } 
} 

currentName変数は、状態が更新されないという問題を引き起こしています。私は動的に各セクションの状態を変更できるようにしたいのですが、このように変数と更新状態を持つことができると思ったのはなぜですか。

キーと値のペアでキーの変数を使用できないようです。どうしてこれなの？動的に状態を更新する代わりに何ができますか？

Answer 1

これは、currentNameという値のキーではなく、currentNameという名前のキーを作成することをJavaScriptが理解しているからです。あなたがやりたいために、あなたは括弧でcurrentNameをラップする必要があります。

return Object.assign({}, state, { 
      [currentName]: { 
      id: currentId, 
      collapse: true 
      } 
     }) 

だから、キーがcurrentNameが何であれになることを理解するであろう。

Answer 2

それも右：あなた `Object.assign`で` currentName`周り

return Object.assign({}, state, { 
    [currentName]: Object.assign({}, state[currentName], { 
    id: currentId, 
    collapse: true 
    }) 
})