使用变量更新 reducer 中的状态

Question

我正在构建一个简单的应用程序，它可以根据内容的状态展开和折叠内容部分。基本上，如果 collapse = false，添加一个 class，如果它是 true，添加一个不同的 class.

我将 Next.js 与 Redux 一起使用，运行遇到了问题。我想根据传递操作的参数更新状态。它没有更新状态，我不确定为什么或更好的选择是什么。任何澄清都会很棒！

// 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 变量导致状态无法更新的问题。我希望能够动态更改每个部分的状态，这就是为什么我认为我能够拥有一个变量并像这样更新状态。

您似乎不能为 key/value 对中的键使用变量。为什么是这样？什么是动态更新状态的替代方法？

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 中的状态

Updating state in reducer using variables

reactjs

redux

nextjs