Splact
Splact

Reputation: 712

What's the right pattern to follow for an Altjs + ReactRouter project?

I started my first react app following this SurviveJS brilliant guide to develop a kanban app. This involves altjs as flux technology, really simple to use.

The author suggests to use an AltContainer to link store(s) to the component(s), an easy solution that will transform your App component (the root one) into something like this:

/* ... */

export default class App extends React.Component {
  render = () => {
    return (
      <div>
        <AltContainer
          stores={[MyStoreOne]}
          inject={{
            myProps: () => MyStoreOne.getState().myProps
          }}
        >
          <ComponentOne/>
        </AltContainer>
        <AltContainer
          stores={[MyStoreTwo]}
          inject={{
            myProps: () => MyStoreTwo.getState().myProps
          }}
        >
          <ComponentTwo/>
        </AltContainer>
      </div>
    );
  }
}

The question now is: when I use a react router what's the best way to let AltContainers work with their linked components, considering a nested routes approach?

/* ... */
import { Router, Route, browserHistory } from 'react-router';
import App from './components/App';

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="/one/:paramOne" component={ComponentOne}/>
      <Route path="/two/:paramTwo" component={ComponentTwo}/>
    </Route>
  </Router>
), document.getElementById('knots'));

Where I have to put my AltContainers, now that the components are called directly from the router (and not from the App)?

Moving the flux logic directly inside the subcomponents (so avoiding AltContainers) is antipattern?

Upvotes: 1

Views: 157

Answers (0)

Related Questions