如何使用 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。