如何在 redux-toolkit 中访问 react-redux 组件外部的 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.

我一直在寻找解决方案，结果 this 遇到了几乎相同的问题，下一条评论中也提到了答案，但老实说我不明白。

我可能在导入顺序上做错了什么我已经尝试了所有可能的方法。作为参考，您可以查看下面我的 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

在

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

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

How to access react-redux store outside react component in redux-toolkit?

javascript

reactjs

redux

react-redux

redux-toolkit