Reactjs 从非redux组件中的redux存储分派操作

几天来，我一直在为一个问题绞尽脑汁，却找不到一个好的解决办法

长话短说，每次我提出定制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;

我通常会导出我的存储并调用action creator，除非存储声明是这样的

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

因此，如果我尝试这样做，将创建一个新商店，这是我不想要的

---

有人知道如何解决这个问题吗？

我已经实现了这个逻辑来处理全局未经授权的请求，但我认为您也可以将其用于您的案例。只需使用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'));

从“React”导入React；
从“axios”导入axios；
从'react dom'导入{render}；
从“react Router dom”导入{BrowserRouter as Router，Route}；
//复配粘合剂
从'react redux'导入{Provider}；
//我们的数据存储
从“/store”导入reduxStore；
从“./components/App”导入应用程序；
常数路由器=(
);
从“/actions/global”导入{didFireRequest，didFinishRequest}；
const{dispatch}=reduxStore；
/**拦截传出请求并更新加载指示器状态**/
axios.interceptors.request.use(
配置=>{
调度（didFireRequest（））；
返回配置；
},
错误=>{
调度（didFinishRequest（））；
返回承诺。拒绝（错误）；
}
);
/**截获所有响应更新加载指示器状态**/
axios.interceptors.response.use(
响应=>{
调度（didFinishRequest（））；
返回响应；
},
错误=>{
调度（didFinishRequest（））；
返回承诺。拒绝（错误）；
}
);
呈现（router，document.getElementById（'app-root'）；