Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
108 views
in Technique[技术] by (71.8m points)

reactjs - Use same context between app and custom library

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-intlto 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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share

2.1m questions

2.1m answers

63 comments

56.6k users

...