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

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

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

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

TypeScript

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

React.js

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

解決済

createAsyncThunkの型定義で怒られます。

maikeru12sd
maikeru12sd

総合スコア10

Redux

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

TypeScript

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

React.js

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

1回答

0評価

0クリップ

215閲覧

投稿2022/07/18 05:08

前提

Redux React TypeScriptでsnsアプリを作っています。
apiを呼び出す際(fetchPostsAsync()の処理)にエラーが起きました。

TS2345: Argument of type 'AsyncThunkAction<PostsState[], undefined, {}>' is not assignable to parameter of type 'AnyAction'.

イメージ説明

実現したいこと

エラーを無くしたい。

該当のソースコード

Post.tsx

import React, { useEffect } from 'react' import { useDispatch } from 'react-redux'; import { useAppSelector } from '../../app/hooks'; import { selectPosts, fetchPostsAsync, selectStatus, Statuses } from './postSlice' function Posts() { const posts = useAppSelector(selectPosts); const status = useAppSelector(selectStatus); const dispatch = useDispatch(); useEffect(() => { dispatch(fetchPostsAsync()); ←ここでエラー![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-07-18/66c8fda5-9f46-441f-a602-c64e5c9e1ac1.png) }, [dispatch]) let contents; if (status !== Statuses.UpToDate) { contents = <div>{status}</div> } else { contents = <div className='card'> <div className='card-body'> <h3>{status}</h3> {/* form */} {posts && posts.length > 0 && posts.map(post => { return <div key={post.id} style={{ margin: "Sem" }}> <h3>{post.title}</h3> <p>{post.body}</p> </div> })} </div> </div> } return ( <div> <h1>投稿</h1> <h3>{status !== Statuses.UpToDate}</h3> contents {status} <ul></ul> </div> ) } export default Posts

postSlice.tsx

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; import produce from "immer"; import { RootState } from "../../app/store"; import { fetchPosts } from "./postAPI"; export enum Statuses { Initial = "not feched", Loading = "Loading...", UpToDate = "Up To Date", Deleted = "Deleted", Error = "Error" } export interface PostState { id?: number, title?: string; body?: string, created_at?: any, updated_at?: any, } export interface PostsState { posts: PostState[]; status: string; } const initialState: PostsState = { posts: [ { id: 1, title: "", body: "", created_at: "", updated_at: "", } ], status: Statuses.Initial } export const fetchPostsAsync = createAsyncThunk<Array<PostsState>, undefined, {}>( "posts/fetchPosts", async (_, { rejectWithValue }) => { try { const response = await fetchPosts(); return response; } catch (error) { return rejectWithValue('データ取得に失敗しました'); } } ) export const postSlice = createSlice({ name: "posts", initialState, /** * Synchoronous actions */ reducers: {}, extraReducers: (builder) => { builder .addCase(fetchPostsAsync.pending, (state) => { return produce(state, (draftState) => { draftState.status = Statuses.Loading; }) }) .addCase(fetchPostsAsync.fulfilled, (state) => { return produce(state, (draftState) => { draftState.status = Statuses.UpToDate; }) }) .addCase(fetchPostsAsync.rejected, (state) => { return produce(state, (draftState) => { draftState.status = Statuses.Error; }) }) } }); export const { } = postSlice.actions; export const selectPosts = (state: RootState) => state.posts.posts; export const selectStatus = (state: RootState) => state.posts.status; export default postSlice.reducer;

postAPI.ts

import { PostsState, } from "./postSlice"; const API_URL = "http://localhost:3000"; export async function fetchPosts() { return fetch(`${API_URL}/posts.json`, { method: "GET", headers: { "Content-Type": "application/json", }, }).then((response) => response.json()) .catch((error) => { console.log(error); return {} as PostsState; }) }

試したこと

こちらの記事を参考にcreateAsyncThunk<Array<PostsState>, undefined, {}>の部分をいじってみましたがダメでした。

https://zenn.dev/luvmini511/articles/c9cdb77a145f4d

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Redux

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

TypeScript

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

React.js

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