Should these be components or containers in Reactjs + Redux

问题

I am trying to implement what I learned into a site. I am building my first part of my site the "nav bar"

Along the top it has logo and 2 links(home button, logout buttom) and a side nav(MaterilizeCss sidenav) bar(turns into hamburger menu on mobile).

Now the side nav has this

List of all students courses(once they click on a course it will load up that course in the middle of the website container)

Under the list of their courses is an "add course" button to add more courses.

Now

I am confused what these should be a container or component? Right now I made my NavBar a container.

Though I am thinking that displaying the "courses" will be a component(though I guess it could be a container with a course list and then component of course) and "add courses" will be also a component.

I also do have an App component(but maybe it should be a container)that will have all the other containers/components in it.

export default class App extends React.Component {
  render() {
    return (
      <NavBar />
    )
  }
}

Thoughts?

Edit

I have some code(html code). It might make it easier to see how I should break it up

 <nav className="light-blue">
    <div className="nav-wrapper container">
      <a id="logo-container" href="#" className="brand-logo">App</a>
      <ul className="right hide-on-med-and-down">
        <li><a href="/Home/Index"><i className="fa fa-2x fa-home" aria-hidden="true"></i></a></li>
        <li><a href="/Account/SignOut"><i className="fa fa-sign-out fa-2x " aria-hidden="true"></i></a></li>
      </ul>
          <ul id="slide-out" className="side-nav fixed">
            <li>
                <a href="#!">Course 1</a>
            </li>
            <li>
                <a href="#!">Course 2</a>
            </li>
            <li>
                <a href="#!">Course 3</a>
            </li>
            <li>
                <a className="waves-effect waves-light"><i className="fa fa-plus" aria-hidden="true">Add</i></a>
            </li>
            <li className="hide-on-large-only"><a href="/Home/Index">Home</a></li>
            <li className="hide-on-large-only"><a href="/Account/SignOut">Signout</a></li>
        </ul>
      <a href="#" data-activates="slide-out" className="button-collapse"><i className="material-icons">menu</i></a>
    </div>
  </nav>

I have this component:

export default class App extends React.Component {
  render() {
    return (
      <NavBarContainer />
    )
  }
}

So right now NavBarContainer spits out the entire html that I posted. I of course need to break this up.

I could have SideNavContainer and then a Course Component.

回答1:

This was hard for me too when i was starting with redux. Try thinking container like "data receiver". So container receives the redux data and spreads it to it's child components "dummy components".

So i would make the list as an container (including the "add course" -button) and "course" is just dummy component (displays data passed by parent container).

Of course you can have multiple containers receiving the same/other data everywhere in your site (like toolbar etc).

回答2:

You want a container to connect to and send down data (this is where you connect in your actions and map your state to your props) , in your case I would have 1 container a the top level and everything else you are describing would be a component inside that just receives (and uses) props. I would split your nav into a few dummy components for re-use, something like nav-bar-component, which has nav-item-component inside and so on.

This is not always the case of course when you get more complex applications you might want more containers. If you are going to be creating a big app you should definitely take the time to architect the state tree and decide if you need to split with containers at multiple areas. Speaking of which, if you are thinking about your app's state tree, the container tend to be the root level areas of the state (unless you are nesting them).

You could, however, have a nav bar container and courses container but I think this is really not necessary with the level of complexity you have here.

By the way, these things are commonly referred to as smart and dumb components, This article has a nice write up on said components http://jaketrent.com/post/smart-dumb-components-react/ , and also a great one here by the guy who authored redux - https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.jic76qxfz

来源：https://stackoverflow.com/questions/38776111/should-these-be-components-or-containers-in-reactjs-redux

标签

reactjs

redux