导入的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);