Search code examples
reactjsreduxstore

REACT REDUX - design pattern

HTML layout

i hava a page as above , i know the best react design of these is one big class (App) with one store(as below),but my question is if i separate these three components into three different classes with 3 signle stores , is it possible to communicate between stores????because i want to make my HTML like 

<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')  
);
Solution

  • No. Out of the box Redux does not provide a solution to communicate between multiple stores. Communication between stores was a pattern seen in Redux's predecessor, Flux

    Multiple stores with Redux will only make managing things harder. So you have been warned :)

    However, a hacky approach to making it work would be to setup another global store that reacts to changes in one store and notifies another store. For more details check out Can or should I create multiple stores? Can I import my store directly, and use it in components myself? It recommends one store and composing multiple reducers together.

    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.

    And despite your initial opinion that multiple stores would solve the problem, consider the following (from the docs)

    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.

    If you have multiple React roots, you can still pass the same store to each of them in 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')  
);

    One each for <div id="name"></div>, <div id="age"></div> and <div id="form"></div>.

    This is possible because Redux only manages state and doesn't concern itself with the React Component tree structure or how React trees you actually have. It simply notifies changes in the state to all those who have subscribed to it.