🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Redux

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

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

TypeScript

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

React.js

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

Q&A

解決済

1回答

531閲覧

React + Redux + TypeScript での非同期処理の実装で型エラー

nerianighthawk

総合スコア544

Redux

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

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

TypeScript

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

React.js

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

0グッド

0クリップ

投稿2019/11/05 09:06

前提・実現したいこと

以下の記事を参考に React + Redux + TypeScript でログイン処理の実装を行っています。
関東最速でReact+Redux+TypeScriptなアプリの開発環境を作る
非同期処理として定義した startLogin, doneLogin, failedLogin を state で記載する際に型エラーになってしまいました。
記事と違う点はフォームの更新を行う同期処理と一緒に書いている点です。
以下にエラー文とソースコードを記載しますが、
Reducer の戻り値の型が case ですべて同じである必要があるのにそうなっていないのでエラーが出ているという認識なのですが、合っているでしょうか。
また、こちらはどういったら解消できるのでしょうか。
よろしくお願いします。

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

Argument of type '(state: LoginState) => void' is not assignable to parameter of type 'Handler<LoginState, LoginState, {}>'. Type 'void' is not assignable to type 'LoginState'.

該当のソースコード

loginAction.ts

TypeScript

1import actionCreatorFactory, { ActionCreator, Success, Failure } from 'typescript-fsa' 2 3const actionCreator = actionCreatorFactory() 4 5const submit = actionCreator.async<{}, {}, {}>('ACTIONS_SUBMIT') 6 7export interface LoginAsyncActions { 8 startLogin: ActionCreator<{}>, 9 failedLogin: ActionCreator<Failure<{}, {}>>, 10 doneLogin: ActionCreator<Success<{}, {}>> 11} 12 13export const loginActions = { 14 updateUserId: actionCreator<string>('ACTIONS_UPDATE_NAME'), 15 updatePassword: actionCreator<string>('ACTIONS_UPDATE_PASSWORD'), 16 startLogin: submit.started, 17 failedLogin: submit.failed, 18 doneLogin: submit.done, 19}

loginState.ts

TypeScript

1import { reducerWithInitialState } from 'typescript-fsa-reducers' 2import { loginActions } from '../actions/loginAction' 3 4export interface LoginState { 5 userId: string 6 password: string 7} 8 9const initialState: LoginState = { 10 userId: '', 11 password: '' 12} 13 14export const loginReducer = reducerWithInitialState(initialState) 15 .case(loginActions.updateUserId, (state, userId) => ( 16 Object.assign({}, state, { userId }) 17 )) 18 .case(loginActions.updatePassword, (state, password) => ( 19 Object.assign({}, state, { password }) 20 )) 21 .case(loginActions.startLogin, (state) => {}) 22 .case(loginActions.failedLogin, (state) => {}) 23 .case(loginActions.doneLogin, (state) => {})

試したこと

試しに型を合わせて state を返してみましたが、Container で以下のようなエラーが発生しました。

Argument of type 'Action<{}>' is not assignable to parameter of type 'Action<string>'. Type '{}' is not assignable to type 'string'.

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

typescript: 3.6.4
react: 16.11.0
redux: 4.0.4

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

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

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

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

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

guest

回答1

0

自己解決

自己解決しました。
やはり、reducer では 状態の変化を扱う部分なので当然 state の型を返す必要がありました。
試したことに書いてある Container でのエラーですが、mapDispatchToProps の引数として disupatch の型を指定しており、そこが string しか許容しないようになっていました。
非同期処理用の型を追加することでエラーを解消することができました。

投稿2019/11/06 01:14

nerianighthawk

総合スコア544

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問