2017-01-10 4 views

ответ

0

Руководство по Redux-Апи-промежуточного

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

Представляя statefulness из запроса с Redux действия

Из Redux документы:

При вызове асинхронного API, есть два важных моментов во времени: момент, когда вы начинаете разговор, и момент, когда вы получаете ответ (или таймаут). Сначала нам нужно определить действия и их создателей, которые связаны с асинхронным вызовом внешнего ресурса для любого данного идентификатора темы.

Есть три возможных состояния обещание, которое представляет запрос API:

  • Pending (просьбу)
  • правдивое (запрос успешно)
  • Отклонено (Сбой запроса - или тайм-аут)

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

Пример

Основных вещей, которые вы должны помнить, приступая к работе с redux-api-middleware библиотеками являются:

  1. Используйте правильные действия создателя подпись и определить правильные полезные нагрузки для различных суб- действия
  2. Настройте свой магазин с помощью промежуточного программного обеспечения

Вот самодостаточный пример:

import { createStore, applyMiddleware, combineReducers } from 'redux'; 
import { apiMiddleware, CALL_API } from 'redux-api-middleware'; 
import reducer from './reducer'; 

const REQUEST = 'REQUEST'; 
const RECEIVE = 'RECEIVE'; 
const FAILURE = 'FAILURE'; 

const store = createStore(reducer, {}, 
    applyMiddleware(apiMiddleware) 
); 

const fetchAction ={ 
    [CALL_API]: { 
    endpoint: 'http://www.example.com', 
    method: 'GET', 
    types: [ 
     { 
     type: 'REQUEST', 
     payload: (action, state) => ({ action: state }) 
     }, 
     { 
     type: 'SUCCESS', 
     payload: (action, state, response) => { 
      return response 
     } 
     }, 
     'FAILURE' 
    ] 
    } 
} 

store.dispatch(fetchAction).then(res => { 
    console.log('success'); 
}).catch(e => { 
    console.log('failure'); 
}); 

Под капотом обещания на основе isomorphic-fetch библиотеки используются для HTTP-запросов. Это означает, что промежуточное программное обеспечение redux api возвращает обещание, когда мы вызываем store.dispatch с сертифицированным действием redux-api-middleware.

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

 Смежные вопросы

  • Нет связанных вопросов^_^