Должны ли они быть компонентами или контейнерами в Reactjs + Redux

Question

Я пытаюсь реализовать то, что я узнал на сайте. Я строю свою первую часть своего сайта «nav bar»

Наверху у него есть логотип и 2 ссылки (кнопка дома, выход из окна) и боковой навигационный бар (MaterilizeCss sidenav) (превращается в меню гамбургеров на мобильном телефоне).

Теперь сторона нав имеет этот

Список всех студентов курсов (когда они нажимают на ходу он загрузит этот курс в середине веб-контейнера)

Под списком своих курсов это кнопка «добавить курс», чтобы добавить дополнительные курсы.

Теперь

Я смущен, что они должны быть контейнером или компонент? Прямо сейчас я сделал свой NavBar контейнером.

Хотя я думаю, что отображение «курсов» будет компонентом (хотя я предполагаю, что это может быть контейнер с списком курсов, а затем компонент, конечно) и «добавить курсы» также будет компонентом.

У меня также есть компонент приложения (но, возможно, он должен быть контейнером), в котором будут все остальные контейнеры/компоненты.

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

Мысли?

Редактировать

У меня есть некоторый код (HTML-код). Это может сделать его легче увидеть, как я должен разбить его

<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> 

У меня есть этот компонент:

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

Так прямо сейчас NavBarContainer выкладывает весь HTML, который я отправил. Мне, конечно, нужно разобраться.

Я мог бы иметь SideNavContainer, а затем компонент курса.

Answer 1

Это было тяжело для меня, когда я начинал с redux. Попробуйте мыслящий контейнер, например, «приемник данных». Таким образом, контейнер получает данные редукции и распространяет его на дочерние компоненты «фиктивные компоненты».

Таким образом, я бы сделал список в качестве контейнера (включая кнопку «добавить курс»), а «курс» - просто фиктивный компонент (отображает данные, переданные родительским контейнером).

Конечно, вы можете иметь несколько контейнеров, получающих одни и те же/другие данные на вашем сайте (например, панель инструментов и т. Д.).

Answer 2

Вы хотите, чтобы контейнер подключался и отправлял данные (это то, где вы подключаетесь в своих действиях и сопоставляете свое состояние с вашими реквизитами), в вашем случае у меня будет 1 контейнер верхнего уровня, а все остальное вы описание будет компонентом внутри, который просто получает (и использует) реквизиты. Я бы разделил ваш навигатор на несколько фиктивных компонентов для повторного использования, что-то вроде nav-bar-component, у которого есть nav-item-component внутри и так далее.

Это не всегда так, конечно, когда вы получаете более сложные приложения, вам может понадобиться больше контейнеров.Если вы собираетесь создавать большое приложение, вам обязательно нужно потратить время на архитектор дерева состояний и решить, нужно ли вам разделить контейнеры на несколько областей. Говоря о том, что, если вы думаете о дереве состояний вашего приложения, контейнер, как правило, является областями уровня корневого состояния (если вы не вложите их).

Однако у вас может быть контейнер контейнера и контейнера для навигации, но я думаю, что это действительно не обязательно с уровнем сложности, который у вас здесь есть.

Кстати, эти вещи обычно называют умные и тупые компоненты Этой статьи имеет хорошую запись на указанных компоненты http://jaketrent.com/post/smart-dumb-components-react/, а также большой один здесь парень, который является автором Redux - https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.jic76qxfz