javascript - 带有 React 的 Redux 存储未定义

Question

我有个问题。我需要更新 api.js 中的商店。我找到了一个解决方案，您可以简单地导入商店并从中调用调度函数。但。导入 api.js 时，我收到一条错误消息，指出商店未定义 请帮助我。告诉我为什么，我很感兴趣。如果有任何解决方案，我也想看看。谢谢

错误画面

这是我的代码结构：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";
import {Provider} from "react-redux";
import store from './Store/redux-store'

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <React.StrictMode>
                <App />
            </React.StrictMode>
        </BrowserRouter>
    </Provider>,
  document.getElementById('root')
);

reportWebVitals();

redux-store.js

import {applyMiddleware, combineReducers, createStore} from "redux";
import thunk from "redux-thunk";
import authReducer from "./auth-reducer";

let reducers = combineReducers({
    auth: authReducer
})

const store = createStore(reducers, applyMiddleware(thunk))

window.store = store

export default store

api.js

import axios from "axios";
import store from '../Store/redux-store'


const instanceWithToken = axios.create({
    withCredentials: true,
    baseURL: `https://luckly-bus.herokuapp.com/api/v1/`
});

const instanceWithTokenFile = axios.create({
    withCredentials: true,
    baseURL: `https://luckly-bus.herokuapp.com/api/v1/`,
    headers: {
        "Authorization": "Bearer " + localStorage.getItem("token"),
        'Content-Type': 'multipart/form-data'
    }
});

const instance = axios.create({
    withCredentials: true,
    baseURL: `https://luckly-bus.herokuapp.com/api/v1/`,
});

instanceWithToken.interceptors.request.use(config => {
    config.headers.Authorization = "Bearer " + localStorage.getItem("token")
    return config
})

instanceWithToken.interceptors.response.use(
    config => {
        return config
    },
    async error => {
        const originalRequest = error.config
        if(error.response.status === 401 && error.config && !error._isRetry){
            originalRequest._isRetry = true
            try {
                const response = await authAPI.refresh()
                localStorage.setItem('token', response.data.accessToken)
                localStorage.setItem('tokenRefresh', response.data.refreshToken)
                return instanceWithToken.request(originalRequest)
            }
            catch (e){
                localStorage.removeItem('token')
                localStorage.removeItem('tokenRefresh')
            }
        }
        throw error
    }
)

标签： javascriptreactjsreduxreact-redux