属性 'pending' 在类型 'AsyncThunkAction<Languages, void, { state: languagesState; }>'.ts(2339) 上不存在，使用 Redux Toolkit

Question

我是 Typescript 的新手，所以我希望我的界面不会使它变得比它必须的更复杂。我一直在处理他们 'start' 所在的任何打字稿错误，并从那里继续前进，希望我能解决它并边走边学。似乎我在这个 redux 切片中留下的唯一红色是 .pending、.fulfilled 和 .rejected 片段。我对可以将它们放在我的界面中的什么位置感到有点困惑，并且希望收到有关如何完全改进我的界面的任何反馈。这是我的语言 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,
  };
}

这是我的语言切片：

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
  }
)

感谢您的帮助，这几天一直在努力解决这个问题！

Answer 1

你的错误在这一行：

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

您不应立即执行异步 thunk 操作创建者，而应仅在调度时执行。

正确的是

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

属性 'pending' 在类型 'AsyncThunkAction<Languages, void, { state: languagesState; }>'.ts(2339) 上不存在，使用 Redux Toolkit

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

typescript

reactjs

redux

redux-toolkit