reactjs - 在 redux 上更新嵌套对象的更好语法

Question

给定如下的 reducer 示例

_({
  expandAbility: (state, a: { which: string }) => ({
    ...state,
    report: state.report && {
      waitingForIt: false,
      content: state.report.content && {
        ...state.report.content,
        interaction: {
          expandAbilities: !state.report.content.interaction.expandAbilities.contains(a.which)
            ? state.report.content.interaction.expandAbilities.add(a.which)
            : state.report.content.interaction.expandAbilities.remove(a.which)
        }
      }
    }
  }),
})

(下面给出的状态类型仅用于问题上下文目的)

const initialState = {
  report: undefined as
    | {
        waitingForIt?: boolean
        content?: {
          supportedFightIds: number[]
          deathCut: number
          reportInfo: any
          deathsFull: any
          deathsByPlayer: any
          deathsByAbility: any
          interaction: {
            expandAbilities: Set<string>
          }
        }
      }
    | undefined,
  error: undefined as Error | undefined
}

是否有任何类型的技巧或“当下的 flavor ”库可以让我以更短的方式编写像 expandAbility 这样的 reducer 更新操作？ (除了可能创建一些 vars 来引用内部路径)

Answer 1

那里有很多不可变的更新实用程序，请查看 https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md#immutable-update-utilities 中的一些选项。看看什么最适合你。对于初学者，请查看 Immutability-helper 或 immer。