时间戳

首页 > 解决方案 > REACT REDUX - 设计模式

reactjs - REACT REDUX - 设计模式

问题描述

HTML 布局

我有一个上面的页面，我知道最好的反应设计是一个大类（应用程序）和一个商店（如下），但我的问题是，如果我将这三个组件分成三个不同的类和 3 个signle 商店， 是可以在商店之间进行通信????因为我想让我的 HTML 像

<div id="Name "></div>
<div id="Age "></div>
<div id="Form "></div>

instead of one     <div id="content"></div>

var App = React.createClass({  
    render() {  
        return (  
            <div>  
                <Name />  
                <Age />  
                <Form />  
            </div>  
        )  
    }  
});




render(  
    <div>  
        <Provider store={store} >  
            <App />  
        </Provider>  
    </div>,  
    document.getElementById('content')  
);

标签： reactjsreduxstore

解决方案

不可以。开箱即用的 Redux 不提供在多个商店之间进行通信的解决方案。商店之间的通信是 Redux 的前身Flux中看到的一种模式

使用 Redux 的多个商店只会使管理变得更加困难。所以你已经被警告了:)

然而，让它工作的一个 hacky 方法是设置另一个全局存储，它对一个存储中的更改做出反应并通知另一个存储。有关更多详细信息，请查看我可以或应该创建多个商店吗？我可以直接导入我的商店，并自己在组件中使用它吗？它推荐一个 store 并组合多个 reducer。

最初的 Flux 模式描述了在一个应用程序中有多个“商店”，每个商店都保存着不同区域的域数据。这可能会引入一些问题，例如需要让一个商店“等待”另一家商店进行更新。这在 Redux 中不是必需的，因为数据域之间的分离已经通过将单个 reducer 拆分为更小的 reducer 来实现。

尽管您最初认为多个商店可以解决问题，但请考虑以下内容（来自文档）

但是，创建新商店不应该是您的第一直觉，尤其是如果您来自 Flux 背景。先尝试reducer组合，如果它不能解决你的问题，只使用多个商店。

如果您有多个 React 根，您仍然可以在 ReactDOM.render 中将相同的存储传递给它们中的每一个

render(  
    <div>  
        <Provider store={store} >  
            <App1 />  
        </Provider>  
    </div>,  
    document.getElementById('name')  
);

render(  
    <div>  
        <Provider store={store} >  
            <App2 />  
        </Provider>  
    </div>,  
    document.getElementById('age')  
);

render(  
    <div>  
        <Provider store={store} >  
            <App3 />  
        </Provider>  
    </div>,  
    document.getElementById('form')  
);

<div id="name"></div>和各<div id="age"></div>一个<div id="form"></div>。

这是可能的，因为 Redux 只管理状态，而不关心 React 组件树结构或你实际拥有的 React 树。它只是将状态的变化通知给所有订阅它的人。

推荐阅读