Question

我必须编写一个集成的聊天模块，它有两个版本 - 一个小的站点内窗口（如facebook messenger）和一个在新选项卡中打开的完整版本（一个新的反应路由器路由）。因此，此模块分别为这些视图导出两个组件：<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);

导入的React组件的状态和路由

1 个答案: