質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

382閲覧

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

yopichan

総合スコア1

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/07/13 11:32

編集2023/07/13 11:54

実現したいこと

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

前提

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

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

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

該当のソースコード

types.ts

1export interface hogehoge { 2 hoge1: hogeA 3 hoge2: hogeB 4} 5 6export interface hogeA { 7 a1: string 8 a2: string 9 a3: string 10 a4: string 11} 12export const initHogeA: hogeA = { 13 a1: "", 14 a2: "", 15 a3: "", 16 a4: "" 17} 18 19export interface hogeB { 20 b1: string 21 b2: string 22 b3: number 23 b4: number 24} 25export const initHogeB: hogeB = { 26 b1: "", 27 b2: "", 28 b3: 0, 29 b4: 0 30}

reducer.ts

1const initialState: hogehoge = { 2 hoge1: initHogeA, 3 hoge2: initHogeB, 4} 5 6export const hogeSlice = createSlice({ 7 name: "hogeState", 8 initialState, 9 reducers: { 10 /** hogeAは中身の型がすべてstringなので、エラーが出ていない? */ 11 hogeHandleA: ( 12 state, 13 action: PayloadAction<{ key: string; value: string }> 14 ) => { 15 state.hoge1[action.payload.key as keyof hogeA] = 16 action.payload.value 17 }, 18 /** 19 * hogeBは中身の型がstringとnumberの混合なので、エラーが出ている?。 20 * 出ているエラー:型 'string | number' を型 'never' に割り当てることはできません。 21 */ 22 hogeHandleB: ( 23 state, 24 action: PayloadAction<{ key: string; value: string | number }> 25 ) => { 26 state.hoge2[action.payload.key as keyof hogeB] = 27 action.payload.value 28 }, 29 }, 30})

試したこと

  • 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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

私は勝利した

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

reducer.ts

1const initialState: hogehoge = { 2 hoge1: initHogeA, 3 hoge2: initHogeB, 4} 5 6export const hogeSlice = createSlice({ 7 name: "hogeState", 8 initialState, 9 reducers: { 10 /** hogeAは中身の型がすべてstringなので、エラーが出ていない? */ 11 hogeHandleA: ( 12 state, 13 action: PayloadAction<{ key: string; value: string }> 14 ) => { 15 state.hoge1[action.payload.key as keyof hogeA] = 16 action.payload.value 17 }, 18 /** 19 * Particalを利用し、するキーと値をセットする。 20 * 旧データと、更新データをオブジェクトに展開し、値を上書きする。 21 */ 22 hogeHandleB: ( 23 state, 24 action: PayloadAction<{ key: string; value: string | number }> 25 ) => { 26 // Particalを利用して、オプショナルのデータを作成し、更新するキーとバリューをセットする。 27 // []でkeyを囲むことで、オブジェクトのプロパティに変数を利用できる。 28 const updateData: Partial<hogeB> = {[action.payload.key]: action.payload.value} 29 // 旧データをオプショナルの更新データをオブジェクトにスプレッド展開し、マージする。 30 state.hoge2[action.payload.key as keyof hogeB] = {...state.hoge2[action.payload.key as keyof hogeB], ...updateData} 31 }, 32 }, 33})

参考

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

投稿2023/07/13 12:43

編集2023/07/13 12:45
yopichan

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問