Как объединить несколько вызовов аксиом в одну полезную нагрузку с помощью сокращений и сокращений?

Question

Я пытаюсь сделать одно действие, которое сделает два отдельных вызова API, а затем объединить данные вместе, а затем передать мой редуктор. Я попробовал сделать первый звонок с обещанием, а затем слияние данных с ним с помощью transformSesponse axios, но я продолжаю получать Ошибка при неактивном: действия должны быть простыми объектами. Используйте специальное промежуточное программное обеспечение для асинхронных действий. ошибка.

Каков наилучший способ для этого?

Answer 1

Важно отметить, что редукторы всегда синхронны. Поэтому редуктор не должен получать обещание. Действия должны состоять только из простых данных и принять следующий вид:

{ 
    type: 'ADD_TODO', 
    payload: { 
    text: 'Do something.' 
    } 
} 

перевождь-обещание позволяет нам поставить обещание в полезной нагрузке действия.

После того, как в цепочку промежуточного программного обеспечения добавлено соглашение о сокращении, мы можем отправлять действия, которые имеют обещание в свой ресурс полезной нагрузки.

Средство промежуточного уровня, обеспечивающее сокращение, будет обрабатывать это действие до того, как оно достигнет магазина, и отправит любые дальнейшие действия после того, как обещание будет разрешено или отклонено, а полезная нагрузка будет состоять из ответа или ошибки в каждом случае.

Эти дальнейшие действия, отправленные обещаниями redux после того, как обещание было разрешено или отклонено, являются синхронными, как любое отправленное действие. Помните, что работа нашего промежуточного программного обеспечения заключается в отправке дополнительных действий после обещание в действии полезной нагрузки разрешено или отклонено.

Отправка Действие -> Middleware (перевождите-обещание рассылает дальнейшие действия) -> редукторов получить ошибку или данные из этих дальнейших действий -> Магазин обновлен редукторами

Вот самодостаточный пример, где мы сделаем запрос на данные о фильме в открытую базу данных фильмов api, чтобы продемонстрировать, как работает сокращение.

На в магазине первый

store.js

import { createStore, combineReducers, applyMiddleware } from 'redux' 
import promiseMiddleware from 'redux-promise' 

let rootReducer = combineReducers(reducers) 

let store = createStore(
    rootReducer, 
    applyMiddleware(promiseMiddleware) 
) 

Теперь нам нужно передать функции applyMiddleware Redux в качестве аргумента для создания магазина и в свою очередь, обеспечивают Redux-перспективен в качестве аргумента применитьMiddleware.

Теперь создатель действия.

Когда вызывается функция создания действия под запросом аксиомы. Этот запрос вернет обещание, которое затем будет передано через наше промежуточное программное обеспечение, обеспечивающее сокращение.

действия/index.js

export function requestMovie(movieTitle) { 
    // create the url for our api request 
    const url = `http://www.omdbapi.com/??=${movieTitle}&y=&plot=short&r=json` 

    return { // return our action 
     type: 'REQUEST_MOVIE', 
     payload: axios.get(url) // this .get method returns a promise 
    } 
} 

Наш редуктор затем будет дано результат нашего обещания.

Основная функция обрабатывает действие, передаваемое по перевождь-обещание промежуточного слоя после того, как обещание было отклонено или разрешенное

редукторы/index.js

import { combineReducers } from 'redux'; 

const rootReducer = combineReducers({ 
    movies: movies, 
    err: err 
}); 

function err(err = false, action){ 
    switch (action.type) { 
     case 'REQUEST_MOVIE': 
     return(action.payload.response.status !== 200) 
    } 

    return err; 
} 

function movies(movies = [], action){ 
    switch (action.type) { 
     case 'REQUEST_MOVIE': 
      // if promise was not rejected the data property on our action payload will exist comprising the movie data that we requested 
      if(action.payload.response.status === 200){ 
      return [...movies, action.payload.response.data] 
      } else{ 
       return [movies] 
      } 
    } 

    return movies 
} 

export default rootReducer;