Status und Routing für importierte React-Komponenten

Question

Ich muss ein integriertes Chat-Modul schreiben, das zwei Versionen hat - ein kleines In-Site-Fenster (wie Facebook Messenger) und eine Vollversion, die in einem neuen Tab geöffnet wird (ein neuer React-Router) Route). Daher exportiert dieses Modul zwei Komponenten: <ChatWindow /> und <ChatFullView /> für diese Ansichten.

// core application 
import {ChatWindow, ChatFullView} from 'chat-module'; 


// <PageContentWithChat /> contains imported <ChatWindow /> 
<Switch> 
    <Route path='/' component={PageContentWithChat} /> 
    <Route path='/fullview' component={ChatFullView} /> 
</Switch> 

Also, die Frage ist:
Wo soll ich die redux Speicher erklären und verwalten es für sie beide? (Sie müssen einen vereinigten Speicher haben, da die Nachrichten aus dem Fenster Version sollten in voller Größe zu sehen und umgekehrt wiedergegeben werden)

EDIT:

// in module 
const store = createStore(reducer); 

.... 
<Provider store={store}> 
    <ChatWindow /> 
    <ChatFullView /> 
</Provider> 

Aber: ich das Modul von innen steuern wollte Ich fürchte, ich kann diese Komponenten nicht separat exportieren, da sie mit <Provider /> verpackt sind. Wie ist es möglich, das zu lösen?

Answer 1

react-redux stellt den Speicher über den Kontext über die Provider-Komponente zur Verfügung.

Angenommen <ChatWindow /> und <ChatFullView /> sind verbundene Komponenten, würden Sie alles in <Provider /> wickeln, in Ihrem Geschäft als Requisite übergeben.

Natürlich können Sie alles in verschiedene Dateien organisieren, aber das ist die allgemeine Idee.

import React from 'react'; 
import { render } from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { Switch, Route } from 'react-router'; 
import { BrowserRouter } from 'react-router-dom'; 
import { createStore } from 'redux'; 
import PageContentWithChat from 'path-to-page-content-with-chat'; 
import { ChatWindow, ChatFullView } from 'chat-module'; 

const store = createStore(/* reducers + initial message state passed in here... */); 
const container = document.getElementById(/* id of your app container */); 
const component = (
    <Provider store={store}> 
    <BrowserRouter> 
     <Switch> 
     <Route path='/' component={PageContentWithChat} /> 
     <Route path='/fullview' component={ChatFullView} /> 
     </Switch> 
    </BrowserRouter> 
    </Provider> 
); 

render(component, container);