Question

我有一个小问题，我不知道。我正在制作一个使用Redux的应用程序。我想让一个动作创建者分派另一个动作。我已经包括了redux-thunk中间件，但仍然遇到相同的错误。

我试图直接在那些调度中传递对象，而不是返回那些对象的方法，但是仍然发生相同的错误。我也一直试图以不同的方式应用redux-thunk，但仍然是相同的错误。

这是这位动作大片的创作者：

  import {fetchMoviesBegin, fetchMoviesSuccess, fetchMoviesFailure} from 
  '../movie-results/movie-results.action';

  const API_KEY = "d14e23d0";

   export const getResults = async (inputValue) => {
   return dispatch => {
   dispatch(fetchMoviesBegin());
   return (async () => {
     try {
       const getAPIS = await fetch(`http://www.omdbapi.com/?a 
       pikey=${API_KEY}&s=${inputValue}`);
       const apiTOJSON = await getAPIS.json();

    //Array ID's assignment
    const returnedValues = apiTOJSON.Search;
    const getIDS = returnedValues.map(item => item.imdbID);

    //Array full of fetched items info
    const fetchInfo = await Promise.all(getIDS.map(id => 
    fetch(`http://www.omdbapi.com/?apikey=${API_KEY}&i=${id}`).then(item 
    => item.json())));

    //Here is the sorted array full of movies with details 
    fetchInfo.sort((a, b) => (a.imdbRating > b.imdbRating) ? -1 : 1);
    dispatch(fetchMoviesSuccess(fetchInfo));
    return fetchInfo;
  }catch(error) {
    return () => dispatch(fetchMoviesFailure(error));
          }
        })()
      }
    }

以下是这些操作：

    import {MovieResultsTypes} from './movie-results.types';

    export const setMovieResults = results => ({
        type: MovieResultsTypes.FETCH_MOVIE_TITLES,
        payload: results
    })

    export const fetchMoviesBegin = () => ({
        type: MovieResultsTypes.FETCH_MOVIES_BEGIN
    })

    export const fetchMoviesSuccess = movies => ({
        type: MovieResultsTypes.FETCH_MOVIES_SUCCES, 
        payload: {movies}
    })

    export const fetchMoviesFailure = error => ({
        type: MovieResultsTypes.FETCH_MOVIES_FAILURE, 
        payload: {error}
    })

这是带有中间件的商店：

   import {createStore, applyMiddleware} from 'redux';
   import logger from 'redux-logger';
   import thunk from 'redux-thunk';

   import rootReducer from './root-reducer';

   const middlewares = [logger, thunk];

   export const store = createStore(rootReducer,                      
   applyMiddleware(...middlewares));

如果有人遇到此问题，请帮助：/

Answer 1

您可以尝试这种语法吗？

为什么还要返回fetchInfo？当商店更改时，连接到商店的组件将自动获取新数据。

  export function getResults(inputValue) {
    
      return async (dispatch) => {

        dispatch(fetchMoviesBegin());

        try {
            dispatch(fetchMoviesBegin());

            const getAPIS = await fetch(`http://www.omdbapi.com/?apikey=${API_KEY}&s=${inputValue}`);
            const apiTOJSON = await getAPIS.json();

            //Array ID's assignment
            const returnedValues = apiTOJSON.Search;
            const getIDS = returnedValues.map(item => item.imdbID);

            //Array full of fetched items info
            const fetchInfo = await Promise.all(getIDS.map(id => fetch(`http://www.omdbapi.com/?apikey=${API_KEY}&i=${id}`)
                .then(item => item.json())));

            //Here is the sorted array full of movies with details 
            fetchInfo.sort((a, b) => (a.imdbRating > b.imdbRating) ? -1 : 1);
            dispatch(fetchMoviesSuccess(fetchInfo));

           // return fetchInfo;
        }
        catch (error) {
            console.log('error: ', error);
            dispatch(fetchMoviesFailure(error));
          }
      }
    }

Redux中间件问题-错误：操作必须是普通对象。使用自定义中间件进行异步操作

1 个答案: