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

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

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

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

React.js

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

受付中

TypeScript,React, useReducerでエラー

rudeboy1022
rudeboy1022

総合スコア0

TypeScript

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

React.js

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

1回答

0リアクション

0クリップ

386閲覧

投稿2022/08/11 14:56

前提

TypeScript、Reactを使ってUseReducerを使おうとしています。
MERNでログイン機能のフロント側を作っているのですがUseReducerの所でエラーが発生しました。

実現したいこと

TypeScriptでUseReducerを使う

エラーメッセージ この呼び出しに一致するオーバーロードはありません。 5 中 1 のオーバーロード, '(reducer: ReducerWithoutAction<any>, initializerArg: any, initializer?: undefined): [any, DispatchWithoutAction]' により、次のエラーが発生しました。 型 '(state: State, action: ACTIONTYPE) => State | { user: { user: string | null; }; }' の引数を型 'ReducerWithoutAction<any>' のパラメーターに割り当てることはできません。 5 中 2 のオーバーロード, '(reducer: (state: State, action: ACTIONTYPE) => State | { user: { user: string | null; }; }, initialState: never, initializer?: undefined): [never, Dispatch<...>]' により、次のエラーが発生しました。 型 '{ user: null; }' の引数を型 'never' のパラメーターに割り当てることはできません。ts(2769)

該当のソースコード

TypeScript

ソースコード import React, { createContext, useReducer } from "react"; type authProviderProps = { children: JSX.Element | JSX.Element[]; }; type LoginAction = { type: "LOGIN"; payload: { user: string | null }; }; type LogoutAction = { type: "LOGOUT"; }; type ACTIONTYPE = LoginAction | LogoutAction; type createContextProps = { state: string; dispatch: React.Dispatch<ACTIONTYPE>; }; type Iuser = { _id: string; email: string; password: string; } | null; type State = { user: Iuser; }; export const authContext = createContext({} as createContextProps); export const authReducer = (state: State, action: ACTIONTYPE) => { switch (action.type) { case "LOGIN": return { user: action.payload }; case "LOGOUT": return { user: null }; default: return state; } }; const initialState: State = { user: null, }; export const AuthContextProvider = ({ children }: authProviderProps) => { const [state, dispatch] = useReducer(authReducer, initialState); //<-ここでエラー console.log("AuthContext state:", state); return ( <authContext.Provider value={{ ...state, dispatch }}> {children} </authContext.Provider> ); };

試したこと

このエラーメッセージに関して検索してみたところ、throw Errorをconsole.errorにしてしまった場合、redecerの返り値をすべて型定義しない場合に発生する、という2つを見つけました。前者の可能性は無いと思いますので恐らく後者が原因ではないかと考えています。

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

react 17.0.2
typescript 4.6.2

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

hoshi-takanori

2022/08/14 00:30

state の型が合ってません。 type State は { user: Iuser } なのに、authReducer が LOGIN の際に返すものは { user: { user: string | null } } になってます。 (あと、type Iuser は | null を含まないほうが扱いやすいのでは…。)

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

TypeScript

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

React.js

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