REACT REDUX-设计模式

Question

我有一个如上所述的页面，我知道这些的最佳反应设计是一个拥有一个商店（如下所示）的大类（应用程序），但是我的问题是我是否将这三个组件划分为三个拥有3个signet商店的不同类， 是可以在商店之间进行沟通吗？???因为我想让我的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')  
);  

Answer 1

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

Redux的多家商店只会让事情变得更难管理。 所以你被警告了:)

但是，要使其正常工作，一种不明智的方法是设置另一个全局存储，该存储对一个存储中的更改做出反应并通知另一存储。 有关更多详细信息，请查看我可以还是应该创建多个商店？ 我可以直接导入商店，然后自己在组件中使用它吗？ 建议一个商店，将多个异径管组合在一起。

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

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

但是，创建新商店并不是您的第一本能，特别是如果您来自Flux背景。 请先尝试使用reducer composition，如果无法解决您的问题，请仅使用多个商店。

如果您有多个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 Component树结构或实际拥有的React树无关。 它只是将状态更改通知所有已订阅状态的人。