前提・実現したいこと
以下の記事を参考に 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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。