如何在 fetch 拦截器中调度 redux 操作？答案

【问题标题】：How to dispatch redux action inside fetch interceptor?如何在 fetch 拦截器中调度 redux 操作？
【发布时间】：2020-05-05 09:33:21
【问题描述】：

您好，我有一个获取拦截器来捕获一些常见的响应，例如 401 等……当响应状态等于 401 时。我需要在拦截器本身内部调度注销操作。但我做不到。调度操作不起作用。在这里我分享我所做的代码。请帮我解决这个问题。

import fetchIntercept from 'fetch-intercept';
import { pushToDataLayer } from './GTMUtility';
import configureStore from '../redux/configureStore';
import { LoggedOut } from "../redux/auth/actions";


const getEndPointFromURL = (url = '') => {
    if (!url) return;
    const urlSegments = url.split('/')
    return urlSegments[urlSegments.length - 1];
}

const store = configureStore();

export const interceptor = fetchIntercept.register({
    request: function (url, config) {
        return [url, config];
    },

    requestError: function (error) {
        // Called when an error occured during another 'request' interceptor call
        return Promise.reject(error);
    },

    response: function (response) {
        if (response.status === 401) {
            store.dispatch(LoggedOut());
            return false
        }
        return response;
    },

    responseError: function (error) {
        // Handle an fetch error
        return Promise.reject(error);
    }
});

出口商店：

import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./rootReducer";
import createSagaMiddleware from "redux-saga";
import { fromJS } from "immutable";

export default function configureStore(initialState = {}) {
  const sagaMiddleware = createSagaMiddleware();
  const middlewares = [sagaMiddleware];

  const composeEnhancers =
    typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
      : compose;

  return {
    ...createStore(
      rootReducer,
      composeEnhancers(applyMiddleware(...middlewares))
    ),
    runSaga: sagaMiddleware.run
  };
}

提前致谢。

【问题讨论】：

我看到了const store = configureStore();，但您没有导出商店，您是在创建多个商店吗？
现在我导出了商店。但没有运气
向我们展示您如何导出/导入存储和configureStore 函数
我已经编辑了我的问题。关于我如何导出 configureStore

标签： reactjs react-redux fetch redux-saga

【解决方案1】：

在您的拦截注册文件中，您还必须导出该存储以供其他文件使用。如果您还在其他地方调用const store = configureStore()，那将创建一个全新的 store 实例。那么拦截器使用的store.dispatch 不会影响商店的另一个实例，因此你的问题。

我建议不要导出configureStore 函数，而是在该文件中创建商店并导出它。

export const store = configureStore()

然后在拦截器文件中：

import { store } from '../redux/configureStore';

与需要存储的其他文件相同。不要再次创建它。

【讨论】：