Context and Provider not accessible via Modal

user_2112618 0
Viewed 737

I do not control the modal components in my company. The I am using redux-toolkit so I am wondering if this is the issue. I have tried a few different iterations trying to get this to work and tried mimicing another app that it works with (standard redux app).

The below code is me trying to mimic the other app that has it working.

my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'proxima-nova/scss/proxima-nova.scss'
import './css/styles.scss';
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { RcReducer } from './Store/RC/Events';
import { RcDataReducer } from './Store/RC/RcData';

const middleware = [...getDefaultMiddleware()];

export const ReduxStore = configureStore({
    reducer: {
        RcEvents: RcReducer,
        RcData: RcDataReducer,
    },
    middleware,
});

ReactDOM.render(<App store={ReduxStore} />, document.getElementById('app'));

My app.tsx

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Wrapper from './Components/Wrapper/Wrapper';
import './App.scss';
import Loader from './Components/Common/Loader/Loader';
import { Provider } from 'react-redux';
import StoreProvider from './Store/Store';

const Home = lazy(() => import('./Components/Pages/Home/Home'));
const RcDashboard = lazy(() => import('./Components/Pages/RC/RC'));
const EccDashboard = lazy(() => import('./Components/Pages/ECC/Dashboard/Dashboard'));

const App: React.FunctionComponent<{ store: any }> = ({ store }: { store: any }) => {
    return (
        <Provider store={store}>
            <StoreProvider>
                <Router>
                    <div id='root'>
                        <Wrapper>
                            <Suspense fallback={<Loader overlay={true} fullscreen={false} size='xl' />}>
                                <Switch>
                                    <Route path='/' exact component={Home} />
                                    <Route path='/rc' component={RcDashboard} />
                                    <Route path='/ecc' exact component={EccDashboard} />
                                </Switch>
                            </Suspense>
                        </Wrapper>
                    </div>
                </Router>
            </StoreProvider>
        </Provider>
    );
};

export default App;

I am calling a component that is provided for use within my company. I personally do not have control over how this component acts. It is a modal. The modal does not just append itself to the component it is called in and automatically appends itself to the body tag.

For some reason the neither my context nor my redux store are showing up. I instead get this.

enter image description here

I am currently at a loss as to how I can get this working. I appreciate any help provided.

redux-toolkit redux reactjs
1 Answers

I would assume that that modal if somehow forwarding the context value, but probably only legacy context. So it might work with an older version or react-redux, but not with a current one.

You'll have to either use a Portal in the modal instead of creating a completely new ReactDOM instance (which is probably happening right now) or forward the current value to a new in the modal, like this


function YourComponent(){
  const store = useStore()

  return <Modal><Provider store={store}>whatEverGoesIntoYourModal</Provider></Modal>
}
user_20759440
Related