时间戳

首页 > 解决方案 > 如何在 redux-toolkit 中的 react 组件之外访问 react-redux 存储？

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

问题描述

我正在尝试在我的辅助函数中访问 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');

正如您在最后两行代码中看到的那样，我正在尝试控制台记录状态，并且我正在按预期获得状态。但是当我在我的辅助函数中导入商店时，我变得不确定。这是我的做法

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();

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

标签： javascriptreactjsreduxreact-reduxredux-toolkit

解决方案

在

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

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

此外，在导入时，您导入其中的第一个并调用它，storeSaga即使这与 saga 完全无关。

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

如果在那之后仍然有错误，那么您需要在某个地方解决循环导入，这意味着该文件从一个也导入该文件的文件中导入（可能中间有第三个文件），形成一个圆圈。JavaScript 无法使用它。

推荐阅读