Reduxのstateを簡素に更新したい。

Question

実現したいこと

Reduxのstateを簡素に更新したい。

前提

React Redux Typescriptを使ってアプリケーションを作っています。
interfaceで型付けしたstateをkeyとvalueを渡して更新しようとすると、interfaceの中身が全部stringの時はエラーが出ないのに、中身がstringとnumberの混合interfaceだと以下のエラーが出る。

発生している問題・エラーメッセージ

型 'string | number' を型 'never' に割り当てることはできません。
型 'string' を型 'never' に割り当てることはできません。

該当のソースコード

export interface hogehoge {
  hoge1: hogeA
  hoge2: hogeB
}

export interface hogeA {
  a1: string
  a2: string
  a3: string
  a4: string
}
export const initHogeA: hogeA = {
  a1: "",
  a2: "",
  a3: "",
  a4: ""
}

export interface hogeB {
  b1: string
  b2: string
  b3: number
  b4: number
}
export const initHogeB: hogeB = {
  b1: "",
  b2: "",
  b3: 0,
  b4: 0
}

const initialState: hogehoge = {
  hoge1: initHogeA,
  hoge2: initHogeB,
}

export const hogeSlice = createSlice({
  name: "hogeState",
  initialState,
  reducers: {
    /** hogeAは中身の型がすべてstringなので、エラーが出ていない？ */
    hogeHandleA: (
      state,
      action: PayloadAction<{ key: string; value: string }>
    ) => {
      state.hoge1[action.payload.key as keyof hogeA] =
        action.payload.value
    },
    /** 
     * hogeBは中身の型がstringとnumberの混合なので、エラーが出ている？。
     * 出ているエラー:型 'string | number' を型 'never' に割り当てることはできません。
     */
    hogeHandleB: (
      state,
      action: PayloadAction<{ key: string; value: string | number }>
    ) => {
      state.hoge2[action.payload.key as keyof hogeB] =
        action.payload.value
    },
  },
})

試したこと

• valueをnever型にしてみる → エラーは消える。でもnever型って安易に使っていいものなの？という疑問

    hogeHandleB: (
      state,
      action: PayloadAction<{ key: string; value: string | number }>
    ) => {
      state.hoge2[action.payload.key as keyof hogeB] =
        action.payload.value as never // as never を追加
    },

• valueに動的に型付けする→型 'name' はインデックスの型として使用できません。と、変数が型扱いされて取得できない。

    hogeHandleB: (
      state,
      action: PayloadAction<{ key: string; value: string | number }>
    ) => {
      const name:string = 'hogeA' // 追加
      type DetailRowIdType = DetailRow[name] // 追加
      state.hoge2[action.payload.key as keyof hogeB] =
        action.payload.value as DetailRowIdType
    },

補足情報（FW/ツールのバージョンなど）

使用しているツール

• typescript: 5.1.3
• react: 18.2.0
• redux: 4.2.1
• react-redux: 8.0.7

Answer 1

私は勝利した

• reducer.tsを書き換えます
  • Particalを利用して、オプショナルのデータを作成し、更新するキーとバリューをセットする。
  • 旧データをオプショナルの更新データをオブジェクトにスプレッド展開し、マージする。

const initialState: hogehoge = {
  hoge1: initHogeA,
  hoge2: initHogeB,
}

export const hogeSlice = createSlice({
  name: "hogeState",
  initialState,
  reducers: {
    /** hogeAは中身の型がすべてstringなので、エラーが出ていない？ */
    hogeHandleA: (
      state,
      action: PayloadAction<{ key: string; value: string }>
    ) => {
      state.hoge1[action.payload.key as keyof hogeA] =
        action.payload.value
    },
    /** 
     * Particalを利用し、するキーと値をセットする。
     * 旧データと、更新データをオブジェクトに展開し、値を上書きする。
     */
    hogeHandleB: (
      state,
      action: PayloadAction<{ key: string; value: string | number }>
    ) => {
      // Particalを利用して、オプショナルのデータを作成し、更新するキーとバリューをセットする。
      // []でkeyを囲むことで、オブジェクトのプロパティに変数を利用できる。
      const updateData: Partial<hogeB> = {[action.payload.key]: action.payload.value}
      // 旧データをオプショナルの更新データをオブジェクトにスプレッド展開し、マージする。
      state.hoge2[action.payload.key as keyof hogeB] = {...state.hoge2[action.payload.key as keyof hogeB], ...updateData}
    },
  },
})

参考

https://ja.stackoverflow.com/questions/67263/interface%E3%82%92object-keys%E3%81%A7%E5%9B%9E%E3%81%97%E3%81%A6%E5%80%A4%E3%82%92%E6%9B%B4%E6%96%B0%E3%81%97%E3%81%9F%E3%81%84