변수를 사용하여 감속기의 상태를 업데이트하십시오.

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

JavaScript는 변수 currentName의 키가 아닌 currentName 키를 만들려고한다는 것을 알고 있기 때문입니다. 당신이 원하는 일을하기 위해, 당신은 괄호 안에 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 
    }) 
})