如何在redux-toolkit中的react组件外访问react-redux存储?

Question

我正在尝试访问我的辅助函数中的redux-store。我的商店看起来像下面的代码:

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import counterReducer from 'app/Components/Counter/counterSlice';
import languageReducer from 'redux/features/app_language/language.slice';
import loginReducer, {
currentUserReducer,
currentUserIdReducer,
} from 'redux/features/app_login/loginSlice';
import rootSaga from 'redux/sagas';
import emailEditorReducer from 'redux/features/email_editor';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
const configureCustomStore = () => {
const sagaMiddleware = createSagaMiddleware();
const persistConfig = {
key: 'root',
storage,
};
const rootReducer = combineReducers({
counter: counterReducer,
app_language: languageReducer,
isAuthenticated: loginReducer,
currentUser: currentUserReducer,
currentUserId: currentUserIdReducer,
emailEditor: emailEditorReducer,
});
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false,
}).concat(sagaMiddleware),
});
const persistor = persistStore(store);
sagaMiddleware.run(rootSaga);
return { store, persistor };
};
export default configureCustomStore();
export const { store, persistor } = configureCustomStore();
console.log(store.getState(), 'State');

正如您在最后两行代码中看到的那样，我正在尝试console.log状态，并且我正在获得预期的状态。但是，当我在我的辅助函数导入商店，我得到未定义。我是这样做的

import storeSaga from 'redux/store/store';
const { store } = storeSaga;

错误是:

TypeError: Cannot destructure property 'store' of 'redux_store_store__WEBPACK_IMPORTED_MODULE_1__.default' as it is undefined.

我一直在寻找解决方案，我最终得到了几乎相同的问题，答案也在下面的评论中提到，但老实说我不明白。

我可能在导入的顺序上做错了什么，我已经尝试了所有可能的方法。作为参考，你可以看看下面我的index.js文件:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Provider } from 'react-redux';
import { I18nextProvider } from 'react-i18next';
import * as serviceWorker from './serviceWorker';
import i18n from './_helpers/utils/i18n';
import storeSaga from 'redux/store/store';
const { store, persistor } = storeSaga;
import App from './app/Pages/App/App';
import { PersistGate } from 'redux-persist/integration/react';
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate persistor={persistor}>
<I18nextProvider i18n={i18n}>
<App />
</I18nextProvider>
</PersistGate>
</Provider>
</React.StrictMode>,
document.getElementById('root'),
);
serviceWorker.unregister();

我非常感谢你的帮助。提前谢谢。

Answer 1

In

export default configureCustomStore(); 
export const { store, persistor } = configureCustomStore();

你正在创建两个独立的商店。

同样，当导入时，您导入其中的第一个并将其命名为storeSaga，尽管这与saga根本没有任何关系。

将默认导出踢出并在所有地方执行import { store } from 'redux/store/store';。这使你在做什么更清楚。

如果在此之后仍然有错误，则需要在某个地方解决循环导入，这意味着该文件从另一个文件导入，该文件也导入该文件(可能中间有第三个文件)，形成一个循环。JavaScript不能处理这个

Answer 2

你可以把Store注入到react组件之外的任何文件中，就像下面的例子:

文件axios:

let store
export const injectStore = _store => {
store = _store
}
axiosInstance.interceptors.request.use(config => {
config.headers.authorization = store.getState().auth.token
return config
})

文件索引(项目根目录)

import store from './app/store'
import {injectStore} from './common/axios'
injectStore(store)

你也可以在这里读到:https://redux.js.org/faq/code-structure how-can-i-use-the-redux-store-in-non-component-files