Как «тупые» должны быть немые компоненты?

Question

Я строй своего Redux (NgRx) приложение с компонентами смарта/автосамосвалов, но я борюсь с решая, как «немой» немая компонента должна быть ...

К примеру, у меня есть умного компонент (posts), который содержит немой компонент (post-list), который содержит немые компоненты (post). Пока здесь все выглядит красиво.

Чтобы отобразить некоторые кнопки мне нужно знать, если пользователь admin или нет, и я должен был бы передать имущество admin весь путь вниз от posts к post.

Могу ли я подключить немой компонент post к магазину и получить его непосредственно от немого компонента. Или компонент в этом случае больше тупой? Это будет выглядеть примерно так:

private admin$: Observable<boolean>; 
    constructor(private store: Store<AppState>){ 
    this.admin$ = this.store.let(isAdmin()); 
    } 

Я думаю, что это позволит сэкономить много избыточности. Это хорошая или плохая практика?

Answer 1

Этот вопрос относится к любой клиентской платформе, включая React/Flux, а также устаревшие приложения с угловым 1.x (обычно через что-то вроде https://github.com/angular-redux/ng-redux), и, как и многие другие, ответ заключается в том, что это зависит от ваших вариантов использования.

Вы задали еще два вопроса. Как тупые должны быть немые компоненты и как лучше всего определить, должен ли компонент быть глупым в первую очередь.

Вопрос 1: О том, как лучше всего определить, является ли компонент должен быть немым в первую очередь:

В вашем конкретном случае, я бы задать вопрос: Будет ли компоненты Post Списка или сообщений будут использоваться вне сообщений? Итак, сделайте наивысший «уровень» умным компонентом (также называемым контейнером). Например, если Post будет использоваться только в Post List, но Post List может использоваться вне сообщений, тогда Post List должен быть интеллектуальным компонентом, позволяющим вам просто «сбрасывать» его на другие компоненты.

Это иллюстрирует общий подход. Спросите, может ли немой компонент, вероятно, существовать выше или как родственный брат для его интеллектуального компонента, и если да, продвигайте его, а если нет, оставьте его как немой компонент.

Вопрос 2: Как «немой» должен немой компонент быть:

Немой компонент должен быть принят все, что меняется, и в качестве лучшей практики, методы требуют каких-либо событий, которые могут произойти на основе действие пользователя.

Например: если текст, изображения или носители основаны на изменениях в состоянии приложения, эти данные должны быть переданы компоненту. И если существуют кнопки, ссылки, формы или другие элементы, доступные для кликов, передача по меньшей мере необязательных обратных вызовов/методов для вызова для них обеспечит пользователям гибкость вашего компонента (даже это ваша), поскольку требования приложения растут.

Answer 2

Я бы подумал, что «тупой» можно использовать повторно в другом контексте.

Dumb будет представлять интерес только для его родителей.

Мантра Я повторяю себе, используя угловой 2.Если это становится сложным и запутанным, переосмыслите мою стратегию.

Что касается еще одного уровня компонентов. Режим администратора - один ребенок, а не администратор - другой. Эти дочерние компоненты могут получать свои данные через Input и испускать через Output.

Answer 3

Немые компоненты должны быть составными компонентами без какой-либо логики.

Согласно Dan Абрамовым Автор Redux, тупые компоненты соответствуют следующие: из условий

• озабочены тем, как выглядят вещи.
• Может содержать как презентационные, так и контейнерные компоненты ** внутри и, как правило, иметь некоторую разметку и стили DOM.
• Часто разрешайте сдерживание через this.props.children.
• Не зависимо от остальных приложений, таких как действия или магазины Flux.
• Не указывайте, как данные загружаются или мутируются.
• Получить данные и обратные вызовы исключительно через реквизиты.
• Редко имеют собственное состояние (когда они это делают, это состояние пользовательского интерфейса, а не данные).
• Написаны как функциональные компоненты, если им не нужны состояния, крючки жизненного цикла или оптимизация производительности.
• Примеры: Страница, Боковая панель, История, Пользовательская информация, Список.

В угловом

Они должны просто отображать информацию и обрабатывать события от входных и выходных потоков.

Так что моя рекомендация состоит в том, что проверка на ngrx пример приложения на смарт и немым: https://github.com/ngrx/example-app

Также вы можете увидеть, как я сделал реализацию умных и немым в игре. https://github.com/wizardnet972/tic-tac-toe

Примечание: Контейнерные компоненты также могут использоваться повторно. Является ли компонент компонентом представления или компонентом контейнера, является деталью реализации.

Презентационные компоненты получают данные через @Input() и сообщают события через @Output(), но обычно не поддерживают собственное внутреннее состояние. Все решения делегируются «контейнерам» или «умным» компонентам до того, как потоки данных возвращаются вниз.

Надеюсь, это полезно.

Answer 4

Я полагаю, вам необходимо изменить структуру ваших компонентов, как на картинке: - Smart_VS_Dumb