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

Question

前提

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

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

実現したいこと

エラーを無くしたい。

該当のソースコード

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

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;

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/ツールのバージョンなど）

Answer 1

こちらを追加して解決しました！

const dispatch = useDispatch<AppDispatch>();