Действие по отправке из избыточного хранилища в не избыточный компонент

Question

В течение нескольких дней я обдумывал проблему и просто не могу найти хорошее решение.

Короче говоря, я просто хочу, чтобы загрузчик появлялся на экране каждый раз, когда я делаю собственный запрос axios. У меня есть 6 базовых запросов с перехватчиками, такими как:

export const axiosRequest1 = axios.create({
  //blabla
});

axiosRequest1.interceptors.request.use(
  config => {
     check();
     return config;
  },
error => {
  return Promise.reject(error);
  }
);

axiosRequest1.interceptors.response.use(
  config => {
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Мне нужно сначала запустить загрузчик этого запроса и избавиться от него после последнего.

async function check() {
  if (checked === false) {
    checked = true;
    setTimeout(callback, 699);
  }
}

и обратный вызов:

function callback() {
  isLoading = true;
  console.log('---------------');
  // and here i want to dispatch my actin from redux store with the value of isLoading. 

Действие выглядит так:

const setLoader = isLoading => dispatch => {
  return dispatch({
    type: actionTypes.SET_LOADER,
    isLoading: isLoading
  });
}
export default setLoader;

Обычно я экспортирую свой магазин и вызываю создателя действия, за исключением того, что объявление магазина похоже на это.

const initStore = previousStore => {
  return createStore(//bla);};

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

Кто-нибудь имеет представление о том, как я могу решить эту проблему?

Answer 1

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

import React from 'react';
import axios from 'axios';
import {render} from 'react-dom';
import {BrowserRouter as Router, Route} from 'react-router-dom';

// Redux binders
import {Provider} from 'react-redux';

// Our data store
import reduxStore from './store';

import App from './components/App';

const router = (
  <Provider store={reduxStore}>
    <Router>
      <Route path="/" component={App}/>
    </Router>
  </Provider>
);

import {didFireRequest, didFinishRequest} from './actions/global';
const {dispatch} = reduxStore;

/** Intercept outgoing requests and update loading indicator state. **/
axios.interceptors.request.use(
  config => {
    dispatch(didFireRequest());
    return config;
  },
  error => {
    dispatch(didFinishRequest());
    return Promise.reject(error);
  }
);

/** Intercept all responses update loading indicator state. **/
axios.interceptors.response.use(
  response => {
    dispatch(didFinishRequest());
    return response;
  },
  error => {
    dispatch(didFinishRequest());
    return Promise.reject(error);
  }
);


render(router, document.getElementById('app-root'));