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

它也是对的：

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

使用变量更新reducer中的状态

2 个答案: