Как пофиксить ошибку с thunk typescript?

Всем привет ребят, возникла такая вот ошибка, есть thunk
import {Dispatch} from "react";
import {actions_postReducer, postReducerType, userAction} from "../types/postTypes";
import axios from "axios";

export const get_post_thunk = () => {
    return async (dispatch: Dispatch<postReducerType>) => {
        const response = await axios({
            url: 'https://jsonplaceholder.typicode.com/posts',
            method: 'get'
        })

        setTimeout(() => {
            dispatch({type: actions_postReducer.GET_POSTS, payload: response.data})

            dispatch({type: actions_postReducer.SUCCESS_POSTS})
        }, 1000)
    }
}


Мы присваиваем ему тип postReducerType, вот типы и интерфейсы которые есть
export interface initialStateInterface {
    loading: boolean,
    posts: any[],
    error?: null | string
}

export interface userAction {
    userId: number,
    id: number,
    title: string,
    body: string
}

interface action_payload {
    type: action_payload
}

interface getPostsAction {
    type: actions_postReducer.GET_POSTS,
    payload: any[]
}

interface successPosts {
    type: actions_postReducer.SUCCESS_POSTS
}

export type postReducerType = getPostsAction | successPosts

export enum actions_postReducer {
    GET_POSTS = 'GET_POSTS',
    SUCCESS_POSTS = 'SUCCESS_POSTS'
}


Далее в компоненте я вызываю этот thunk в useEffect
import React, {ReactElement, ReactNode, useEffect, useState} from 'react';
import {useDispatch, useSelector} from "react-redux";
import {get_post_thunk} from "./thunk/getPostsThunk";
import {userAction} from "./types/postTypes";


function App() {
// @ts-ignore
    const posts = useSelector(state => state.posts)
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch(get_post_thunk())
    },[dispatch])
    return (
        <div className="App">
            {posts.loading && <div>loading...</div>}
            {posts.posts.map((post:userAction) => <div>
                {post.title}
                <div>{post.body}</div>
            </div>)}
            234
        </div>
    );
}

export default App;


и проблема в том, что выдает вот такую вот ошибку
TS2345: Argument of type '(dispatch: Dispatch ) => Promise ' is not assignable to parameter of type 'AnyAction'.

Когда я делаю // @ts-ignore
все работает, подскажите, в чем проблема, пожалуйста
  • Вопрос задан
  • 1410 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
28 нояб. 2024, в 14:38
250000 руб./за проект
28 нояб. 2024, в 14:33
70000 руб./за проект
28 нояб. 2024, в 14:18
1500 руб./за проект