Обработка запроса async с помощью React, Redux и Axios?

Ответ 1

Твои создатели действия redux должны быть простыми, объектами и должны отправлять и выполнять действия с обязательным ключом type. Однако, используя пользовательские middlewares, такие как redux-thunk, вы могли бы вызвать axios запрос в своих создателях действий, так как без пользовательского middlewares ваши создатели действия должны возвращать простой объект

Ваш создатель действия будет выглядеть как

export function create (values) {

  return (dispatch) => {
     dispatch({type: CREATE_ORGANIZATION});
     axios.post('/url', values)   
        .then((res) =>{
            dispatch({type: CREATE_ORGANIZATION_SUCCESS, payload: res});
        })
        .catch((error)=> {
            dispatch({type: CREATE_ORGANIZATION_FAILURE, payload: error});
        })
  }

}

и ваш редуктор будет выглядеть как

export default (state = initialState, action) => {
  const payload = action.payload

   switch (action.type) {    
    case CREATE:    

      return {
        ...state,
        loading: true,
        loaded: false
      }

    case CREATE_SUCCESS:
      return {
        ...state,
        data: state.data.concat(payload.data),
        loading: false,
        loaded: true,
        error: null
      }   

      }

    case CREATE_FAILURE:

      return {
        ...state,
        loading: false,
        loaded: true,
        error: payload
      }
    default:
      return state
  }
}

теперь при создании магазина вы можете сделать это как

import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
const store = createStore(
  reducer,
  applyMiddleware(thunk)
);

Кроме того, вам также необходимо установить форму редукции

вам нужно использовать combReducers и Provider для передачи в хранилище

import reducer from './reducer';
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form'

export const rootReducer = combineReducers({
   reducer,
   form: formReducer
})

CodeSandbox

Ответ 2

Вы можете сделать это легко с помощью redux-saga.

О выставке redux-saga:

redux-saga - это библиотека, которая направлена ​​на создание побочных эффектов приложения (то есть асинхронных вещей, таких как извлечение данных и нечистые вещи, такие как доступ к кешу браузера), более простой в управлении, более эффективный для выполнения, простой в тестировании и лучший при обработке сбоев.

Установка:

$ npm install --save redux-saga 

или

$ yarn add redux-saga

Обратитесь к ссылке: https://github.com/redux-saga/redux-saga

Ответ 3

Создатели действия Redux, по-видимому, не поддерживают асинхронные действия, которые вы пытаетесь сделать с почтовым запросом. Redux Thunk должен помочь в этом.

Вам понадобится файл store.js, который выглядит следующим образом:

//npm install --save redux-thunk

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducer.js';

// Note: this API requires [email protected]>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk) //needed so you can do async
);

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

import axios from 'axios'
import { CREATE_ORGANIZATION, CREATE_ORGANIZATION_SUCCESS, CREATE_ORGANIZATION_FAILURE,

       } from './constants'
import * as selectors from './selectors'

/*
  CREATE ORGANIZATION
*/
//uses redux-thunk to make the post call happen
export function create (values) {
  return function(dispatch) {
    return axios.post('/url', values).then((response) => {
      dispatch({ type: 'Insert-constant-here'})
      console.log(response);
    })
    }
  }

Кроме того, вы захотите передать метод onSubmit, который вы создали в onSubmitForm, как это. Я не уверен, откуда происходит isLoading, потому что я не вижу его импортированным в этом компоненте контейнера, поэтому вы можете также посмотреть на него.

  <createOrganization onSubmitForm={this.onSubmit.bind(this)} isLoading={isLoading} />

Ответ 4

Я бы предложил использовать redux-promise-middleware. Эта библиотека требует, чтобы действие имело свойство с именем payload, что является обещанием, и это легко с помощью axios. Затем он интегрируется с Redux для суффикса типа действия корня (например, GET_CUSTOMERS) с помощью PENDING, FULFILLED и REJECTED и запускает эти действия.

Увольнение выполняется так же, как и любое другое действие.

Магазин

import {applyMiddleware, compose, createStore} from 'redux';
import promiseMiddleware from 'redux-promise-middleware';
import reducer from './reducers';

let middleware = applyMiddleware(promiseMiddleware());
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancer = composeEnhancers(middleware);

export default createStore(reducer, enhancer);

Действие

export function getCustomers() {
  return {
    type: 'GET_CUSTOMERS',
    payload: axios.get('url/to/api')
      .then(res => {
        if (!res.ok) throw new Error('An error occurred.');
        return res;
      })
      .then(res => res.json())
      .catch(err => console.warn(err));
  };
}

Редуктор

export default function(state = initialState, action) => {
  switch (action.type) {
    case 'GET_CUSTOMERS_PENDING':
      // this means the call is pending in the browser and has not
      // yet returned a response
      ...
    case 'GET_CUSTOMERS_FULFILLED':
      // this means the call is successful and the response has been set
      // to action.payload
      ...
    case 'GET_CUSTOMERS_REJECTED':
      // this means the response was unsuccessful so you can handle that
      // error here
      ...
    default:
      return state;
  }
}