Argument of type '(dispatch: Dispatch) => Promise' is not assignable to parameter of type 'AnyAction'

Question

I'm just learning how to work with redux, and decided to write a user list app. Writing code below, I get an error from the title of this question and I don't know what to do with it at all! I will highly happy if you help me with my problem!!!!

combineReducers:

import {combineReducers} from "redux";
import {userReducer} from "./userReducer";


export const rootReducer = combineReducers({ 
    user: userReducer,
})

export type RootState = ReturnType<typeof rootReducer>

My reducer:

export interface UserState {
    users: any[];
    loading: boolean;
    error: null | string;
}
export enum UserActionTypes {
    FETCH_USERS = 'FETCH_USERS',
    FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS',
    FETCH_USERS_ERROR = 'FETCH_USERS_FETCH_USERS_ERROR',
}
interface FetchUsersAction {
    type: UserActionTypes.FETCH_USERS;
}
interface FetchUsersSuccessAction {
    type: UserActionTypes.FETCH_USERS_SUCCESS;
    payload: any[]
}
interface FetchUsersErrorAction {
    type: UserActionTypes.FETCH_USERS_ERROR;
    payload: string;
}
export type UserAction = FetchUsersAction | FetchUsersErrorAction | FetchUsersSuccessAction

const initialState: UserState = {
    users: [],
    loading: false,
    error: null
} 

export const userReducer = (state = initialState, action: UserAction): UserState => {
    switch (action.type) {
        case UserActionTypes.FETCH_USERS:
            return {loading: true, error: null, users: []}
        case UserActionTypes.FETCH_USERS_SUCCESS:
            return {loading: false, error: null, users: action.payload}
        case UserActionTypes.FETCH_USERS_ERROR:
            return {loading: false, error: action.payload, users: []}
        default:
            return state
    }
}

createStore & Middleware:

import {applyMiddleware, createStore} from "redux";
import thunk from "redux-thunk";
import {rootReducer} from "./reducers";


export const store = createStore(rootReducer, applyMiddleware(thunk))

Fetch function

import {UserAction, UserActionTypes} from "./../../types/users";
import {Dispatch} from "redux";
import axios from "axios";

export const fetchUsers = () => {
    return async (dispatch: Dispatch<UserAction>) => {
        try {
            dispatch({type: UserActionTypes.FETCH_USERS})
            const response = await axios.get('https://jsonplaceholder.typicode.com/users')
            setTimeout(() => {
                dispatch({type: UserActionTypes.FETCH_USERS_SUCCESS, payload: response.data})
            }, 500)
        } catch (e) {
            dispatch({
                type: UserActionTypes.FETCH_USERS_ERROR,
                payload: 'Произошла ошибка при загрузке пользователей'
            })
        }
    }
}

typescript Component with error:

import React, { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { useTypedSelector } from '../hooks/useTypedSelector'
import { fetchUsers } from '../store/action-creators/users'

type Props = {}

const UserList:React.FC = () => {
    const {users, error, loading} = useTypedSelector(state => state.user)
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(fetchUsers())   <=======[Here is an error]
    },[])
  return (
    <div>UserList</div>
  )
}

export default UserList

Error:

Argument of type '(dispatch: Dispatch<UserAction>) => Promise<void>' is not assignable to parameter of type 'AnyAction'

do you tried add a async function that await the fetchUsers response and then put that response in the dispatch? const response = await fetchUsers(); dispatch(response); — andres martinez, Sep 06 '22 at 02:18
Looks like you need to type your `useDispatch` call as `AppDispatch`. See here: https://redux.js.org/usage/usage-with-typescript#define-typed-hooks — morganney, Sep 06 '22 at 02:41
@andresmartinez have just tried it, but it still doesnt work, the same problem — Ник Белый, Sep 06 '22 at 11:42
`const useTypedDispatch: () => AppDispatch = useDispatch`. Then `useTypedDispatch(fetchUsers())`. — morganney, Sep 06 '22 at 13:17

Argument of type '(dispatch: Dispatch) => Promise' is not assignable to parameter of type 'AnyAction'

0 Answers0