时间戳

首页 > 解决方案 > redux 中间件的问题 - 错误：操作必须是普通对象。使用自定义中间件进行异步操作

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

问题描述

我有一个小问题，我无法弄清楚。我正在制作一个使用 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));

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

标签： reactjsreduxredux-thunk

解决方案

你能试试这个语法吗？

还有为什么你需要返回 fetchInfo？当 store 发生变化时，连接到 store 的组件会自动获取新的数据。

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

推荐阅读