Проблема с избыточным промежуточным программным обеспечением - Ошибка: Действия должны быть простыми объектами. Использовать пользовательское промежуточное ПО для асинхронных действий - PullRequest
Новая
       8

Проблема с избыточным промежуточным программным обеспечением - Ошибка: Действия должны быть простыми объектами. Использовать пользовательское промежуточное ПО для асинхронных действий

0 голосов
/ 31 октября 2019

У меня есть небольшая проблема, которую я не могу понять. Я делаю приложение, которое использует 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));

Если у кого-то возникла эта проблема, пожалуйста, помогите: /

1 Ответ

0 голосов
/ 31 октября 2019

Можете ли вы попробовать этот синтаксис?

Также зачем вам возвращать 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));
          }
      }
    }
...