reactjs - Property 'pending' does not exist on type 'AsyncThunkAction<Languages, void, { state: languagesState; }>'.ts(2339) using Redux Toolkit

Question

I'm pretty new to Typescript, so I hope my interfaces aren't making this more complicated than it has to be. I've just been working through any typescript errors from where they 'start' and moving forward from there, hoping that I can resolve it and learn as I go. It seems just about the only red I have left in this redux slice is for the .pending, .fulfilled and .rejected snippets. I'm a bit confused as to where I can put these in my interfaces, and would appreciate any feedback on how to improve my interfaces altogether. Here is my languages API:

import axios from 'axios';

export interface Language {
  id: number,
  language: string,
  status: string,
  error: string | undefined | undefined
}

export interface GetLanguagesResult {
  languages: {
      [key: string]: Language
  };
}

export async function getLanguages(): Promise<GetLanguagesResult> {
  const url = 'http://localhost:4000/languages'

  const languagesResponse = await axios.get<{data: Language}>(url);

  console.log("data: ", typeof languagesResponse.data);
  return {
    languages: languagesResponse.data,
  };
}

and here is my languages slice:

import {createAsyncThunk, createEntityAdapter, createSlice} from '@reduxjs/toolkit';
import {getLanguages, Language} from './languagesAPI';

interface languagesState {
  entities: Languages;
  ids: Array<number> [];
  status: 'idle' | 'pending' | 'fulfilled' | 'rejected';
  error: string | null;
  pending: string | null;
  fulfilled: string | null;
  rejected: string | null
}

interface Languages {
    [key: string]: Language,
}

const languagesAdapter = createEntityAdapter<Language>({
  selectId: language => language.id
})

const initialState: languagesState = languagesAdapter.getInitialState({
  entities: {} as Languages,
  ids: [],
  status: 'idle',
  error: null,
  pending: null,
  fulfilled: null,
  rejected: null,
}) as languagesState;

/* eslint-disable */

export const fetchLanguages = createAsyncThunk<
  // Return type of the payload creator
  Languages,
  // pending: string | null,

  // First argument to the payload creator (provide void if there isn't one)
  void,
  {state: languagesState}
>('languages/fetch', async (_, thunkAPI) => {
  async () => {
    if (thunkAPI.getState().status !== 'idle') {
      return;
    }
  };

  const response = await getLanguages();
  console.log("languages: ", response.languages);

  return response.languages;
})();
/* eslint-disable */

export const languagesSlice = createSlice({
  name: 'languages',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchLanguages.pending, (state) => {
        if (state.status === 'idle') {
          state.status = 'idle';
        }
      })
      .addCase(fetchLanguages.fulfilled, (state, action) => {
        if (state.status === 'idle') {
          state.status = 'idle';
        }
        state.languages = action.payload;
      })
      .addCase(fetchLanguages.rejected, (state, action) => {
        if (state.status === 'idle') {
          state.status = 'idle';
          state.error = action.error.message || null;
        }
      });
  },
});

export default languagesSlice.reducer

export const { selectAll: selectAllLanguages } = languagesAdapter.getSelectors(
  state => {
    return state.languages
  }
)

Thanks for any help, been struggling with it for a couple days now!

question from:https://stackoverflow.com/questions/65853837/property-pending-does-not-exist-on-type-asyncthunkactionlanguages-void-s

Answer 1

Your error is in this line:

  return response.languages;
})();
/* eslint-disable */

You should not immediately execute the async thunk action creator, but only when dispatching.

correct it would be

  return response.languages;
});
/* eslint-disable */