zustand/docs/updating-nested-state-object-values.md

title	nav
Updating nested state object values	7

Deep nested object

If you have a deep state object like this:

type State = {
  deep: {
    nested: {
      obj: { count: number }
    }
  }
}

It requires some effort to update the count value immutably.

Normal approach

The normal approach is to copy state object with ...:

  normalInc: () =>
    set((state) => ({
      deep: {
        ...state.deep,
        nested: {
          ...state.deep.nested,
          obj: {
            ...state.deep.nested.obj,
            count: state.deep.nested.obj.count + 1
          }
        }
      }
    })),

This is very long!

With immer

Many people use immer to update nested values:

  immerInc: () =>
    set(produce((state: State) => { ++state.deep.nested.obj.count })),

What a reduction!

With optics-ts

There's another option with optics-ts:

  opticsInc: () =>
    set(O.modify(O.optic<State>().path("deep.nested.obj.count"))((c) => c + 1)),

Unlike immer, optics-ts doesn't use proxies nor mutation syntax.

With ramda

You can also use ramda:

  ramdaInc: () =>
    set(R.over(R.lensPath(["deep", "nested", "obj", "count"]), (c) => c + 1)),

This works with types as well as optics-ts.

CodeSandbox Demo

https://codesandbox.io/s/zustand-normal-immer-optics-ramda-updating-ynn3o?file=/src/App.tsx