導入的React組件的狀態和路由

Question

我必須編寫一個集成的聊天模塊，該模塊具有兩個版本-一個小的站點內窗口（如facebook Messenger）和在一個新選項卡中打開的完整版本（一個新的react-router路由）。 因此，此模塊分別導出兩個組件： <ChatWindow />和<ChatFullView />分別用於這些視圖。

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


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

因此，問題是：
我應該在哪里聲明redux存儲並對其進行管理？ （它們必須具有一個統一的存儲，因為窗口版本的消息應以全視圖呈現，反之亦然）

編輯：我想從內部控制模塊：

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

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

但是恐怕我無法單獨導出這些組件，因為它們被<Provider />包裹了。 如何解決這個問題？

Answer 1

react-redux通過Provider組件通過上下文使存儲可用。

假設<ChatWindow />和<ChatFullView />是連接的組件，則將所有內容包裝在<Provider /> ，作為道具傳入您的商店。

當然，您可以將所有這些組織到不同的文件中，但這是一般的想法。

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