REACT REDUX - 设计模式

Question

我有一个页面如上，我知道最好的反应设计是一个大 class（应用程序）和一个商店（如下所示），但是 我的问题是如果我将这三个组件分成三个不同的 classes，有 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')  
);

Answer 1

没有。开箱即用的 Redux 不提供在多个商店之间进行通信的解决方案。 Communication between stores was a pattern seen in Redux's predecessor, Flux

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

但是，使其工作的一种 hacky 方法是设置另一个全局存储，该存储对一个存储中的更改做出反应并通知另一个存储。有关更多详细信息，请查看 Can or should I create multiple stores? Can I import my store directly, and use it in components myself? 它推荐一个商店并将多个减速器组合在一起。

The original Flux pattern describes having multiple “stores” in an app, each one holding a different area of domain data. This can introduce issues such as needing to have one store “waitFor” another store to update. This is not necessary in Redux because the separation between data domains is already achieved by splitting a single reducer into smaller reducers.

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

However, creating new stores shouldn't be your first instinct, especially if you come from a Flux background. Try reducer composition first, and only use multiple stores if it doesn't solve your problem.

如果您有多个 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 树。它只是将状态的变化通知所有订阅它的人。

REACT REDUX - 设计模式

REACT REDUX - design pattern

store

reactjs

redux