action's payload generic type

[adammo94]

I have a following scenario:
I have a slice which is for a form. Form's fields will have different value types.
E.g.

form: {
  name: string;
  age: number;
  someOtherField: {
    label: string;
    value: string;
  }
}

I would like to have a single action/reducer to update all of those fields. e.g.

updateFormField: (state, {payload}) => {
  state.form[payload.key] = payload.value
}

Can anyone direct me towards how should I type the payload?

[phryneas]

Generally:

• Forms should usually not go into Redux
• you should write actions that describe what happened in the system, not have generic setter functions

I would encourage you to read the Redux Style Guide on these topics.

But for the type you want here:

import {PayloadAction} from '@reduxjs/toolkit'

interface SomeObject {
  foo: string,
  bar: number,
  baz: boolean
}

type KeyValuePairs<T> = ({[K in keyof T]: {key: K, value: T[K] }})[keyof T]

type MyAction = PayloadAction<KeyValuePairs<SomeObject>>

[adammo94]

This is a multi step form. What would be a better solution to approach this then?

[phryneas]

Use component-local state or a form library and if you want that state in Redux (not necessarily necessary with a form lib), just save it on "next step" click.

[adammo94]

I was trying to solve this with local component state. Sadly one step's value can influence other step. However mixing local state and redux could actually work. So having redux state updated e.g. on field change is rather advised against cause it would cause performance issues right?

[phryneas]

It's also a conceptual thing: as long as you don't continue to the next step, it's just local component state. Even if they influence each other: what speaks against moving it into Redux on "next step"?