如何使用 reduxjs/toolkit 在 extraReducer 中设置操作类型

Question

我正在使用 reduxjs/toolkit 学习 React，我创建了 thunk，但我在打字时遇到问题。

我收到此错误：Type 'unknown' is not assignable to type 'WritableDraft<MovieModel>[]'

接口和类型

interface StateModel {
  movies: MovieModel[];
  isFetching: boolean;
  errorMessage: any;
}

type MyApiResponse = {
  [key: string]: MovieModel[];
};

我的声音：

export const fetchMoviesAsync = createAsyncThunk('movies/fetchMoviesAsync', async () => {
  try {
    const response = await fetch(
      'https://react-movies-b6b21-default-rtdb.firebaseio.com/movies.json'
    );
    if (!response.ok) {
      throw new Error('Error fetching data ‍');
    }
    const data = await response.json();

    const transformedData = Object.entries(data as MyApiResponse).map(([key, value]) => {
      return {
        ...value,
        id: key,
      };
    });
    return transformedData;
  } catch (error) {
    return error;
  }
});

电影片段：

export const moviesSlice = createSlice({
  name: 'movies/fetchMoviesAsync',
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder.addCase(fetchMoviesAsync.pending, state => {
      state.isFetching = true;
    });
    builder.addCase(fetchMoviesAsync.fulfilled, (state, action) => {
      state.isFetching = false;
      state.movies = action.payload; // this line is getting error
    });
    builder.addCase(fetchMoviesAsync.rejected, (state, action) => {
      state.isFetching = false;
      state.errorMessage = action.payload;
    });
  },
});

我试过像这样为我的 thunk 设置类型：

export const fetchMoviesAsync = createAsyncThunk<MovieModel[]>('movies/fetchMoviesAsync', async () => {}

但随后我收到其他错误：

Argument of type '() => Promise<unknown>' is not assignable to parameter of type 'AsyncThunkPayloadCreator<MovieModel[], void, {}>'

Answer 1

未在 extraReducer 中设置操作类型 - extraReducer 使用您 createAsyncThunk 的操作类型。

你必须做

createAsyncThunk<YourExpectedReturnType>('movies/fetchMoviesAsync', // ...

有关详细信息，请参阅 usage with TypeScript。

在旁注中，您的 return error 将进入已完成的案例，而不是被拒绝的案例。您可能想使用 rejectWithValue.

如何使用 reduxjs/toolkit 在 extraReducer 中设置操作类型

How to set action type in extraReducer using reduxjs/toolkit

typescript

react-redux

redux-toolkit