This is my repo: https://github.com/iBobo5/MyCore.git
If you clone it and run npm run documentation
command you can see what is its purpose.
Specifically it is create to build a wrapper for other application.
This wrapper create redux store with custom application sagas and reducers passed as props and provide also IntlProvider
from react-intl
to create a multilanguage support for custom application.
Application JSX passed as props (or children in another test I've already done) is encapsulated inside this wrapper as the following code shows:
<Provider store={store}>
<MyCoreApplication app={app} cookieInfo={cookieInfo} />
</Provider>
with MyCoreApplication
done like this:
<IntlProvider messages={messages} locale={locale} defaultLocale={config.defaultLanguage}>
<Notification />
{app}
{cookieInfo && cookieInfo.useCookie && cookieInfo.infoLink && <CookieBar infoLink={cookieInfo.infoLink} />}
</IntlProvider>
My focus is create an exportable module with MyCore
components as entry point for other application.
They only use it passing sagas, reducer and JSX as props.
In my head there is the idea that the custom application can use redux store and IntlProvider created by the module.
Example:
I've got create-react-app Test
custom application. It has its own sagas (testSagas) and reducer (testReducer) and its logic behaviour (through different path routing). For semplicity we suppose that Test
is a very simple application as shown:
export const Test = () => (
<Router>
<Layout>
<Header />
<Layout>
<Sider />
<Content>
<SwitchComponent />
</Content>
</Layout>
<Footer />
</Layout>
</Router>
);
In SwitchComponent
I have routing controller and render different compontents depending on path.
In these components I like to have access to redux store and IntlProvider.
Pay attention that my focus is don't create any store in Test
project but use the one that module MyCore
has created.
For this goal I import MyCore
in Test
project and I use in this way:
ReactDOM.render(
<MyCore
withLogs={false}
applicationSagas={testSagas}
applicationReducers={testReducers}
app={Test}
/>
, document.getElementById("container"))
And now there's the really problem: Test
have not a context and IntlProvider so my custom application does't work.
How can I solve it?
I've already tried passing Test
as children in this way
ReactDOM.render(
<MyCore
withLogs={false}
applicationSagas={testSagas}
applicationReducers={testReducers}
>
<Test />
</MyCore>
, document.getElementById("container"))
but it doesn't work anyway.
It's very very important for me, please help me.
Thanks
Matthew
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…