Question

I m moving from Duck to redux toolkit.

Now I ll try to explain this behavior, this thing: = await axios always return the pending action. Removing the await the api call "works", but return undefined.

So what I m missing here?

   movies/searchByTitle ,
  async (values, thunkAPI) => {
    const API_KEY =   ;
    try {
      let {movieTitle} = values;
      let page = 1;
      
      let movies = await axios
        .get(
          `//api.themoviedb.org/3/search/movie?query=${movieTitle}&api_key=${API_KEY}&include_adult=false&page=${page}`,
        )
        .then(response => {
          console.log( results:  , response);
          return response.data;
        })
        .catch(error => {
          const message =
            (error.response &&
              error.response.data &&
              error.response.data.message) ||
            error.message ||
            error.toString();
          console.log(message);
          thunkAPI.rejectWithValue(error);
        });
      return movies;
    } catch (error) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
      console.log(message);
      return thunkAPI.rejectWithValue(message);
    }
  },
);

Thank you!!

Answer 1

you re mixing try / catch with then / catch. Most of the time, you don t do both of them at the same time. You can only choose one of them most of the time.

Here s an example with try / catch:

   movies/searchByTitle ,
  async (values, thunkAPI) => {
    const API_KEY =   ;
    try {
      let {movieTitle} = values;
      let page = 1;
      
      let movies = await axios
        .get(
          `//api.themoviedb.org/3/search/movie?query=${movieTitle}&api_key=${API_KEY}&include_adult=false&page=${page}`,
        )
        console.log( results:  , movies);
      return movies;
    } catch (error) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
      console.log(message);
      return thunkAPI.rejectWithValue(message);
    }
  },
);

or here s an example with then / catch:

 movies/searchByTitle ,
  async (values, thunkAPI) => {
    const API_KEY =   ;
    return axios
        .get(
          `//api.themoviedb.org/3/search/movie?query=${movieTitle}&api_key=${API_KEY}&include_adult=false&page=${page}`,
        )
.then(response => {
          console.log( results:  , response);
          return response.data;
        })
        .catch(error => {
          const message =
            (error.response &&
              error.response.data &&
              error.response.data.message) ||
            error.message ||
            error.toString();
          console.log(message);
          return thunkAPI.rejectWithValue(error);
        });
  },
);

友情链接