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樹無關。 它只是將狀態更改通知所有已訂閱狀態的人。