导入React组件的状态和路由

我必须编写一个集成的聊天模块，它有两个版本 - 一个小型的现场窗口（如facebook messenger）和一个在新选项卡中打开的完整版本（一个新的react-router路线）。因此，这个模块分别输出两个组件：<ChatWindow />和<ChatFullView />。
导入React组件的状态和路由

// 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 />包装的。怎么可能解决这个问题？

来源

2017-08-28 Michael Reyfman

为什么如果'chat-module'已经做到这一点，你需要单独导出每一个？ –

react-redux通过提供程序组件使上下文可用。

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

来源

2017-08-28 20:32:53

是否可以从同一模块导入reducer并封装属于聊天应用程序的所有操作和常量？ –

@MichaelReyfman如果你正在谈论从'chat-module'导出reducer，就像你导出'ChatWindow'和'ChatFullView'一样，那么是的。您可以从模块中尽可能多地导出。 –

导入React组件的状态和路由

回答

相关问题