Projektowanie komponentów: Presentational & Container Components

[type-of-web-komentarze[bot]]

Projektowanie komponentów: Presentational & Container Components

Często w różnych artykułach poświęconych Reactowi i Reduksowi napotkasz takie sformułowania jak Presentational and Container Components albo Skinny and Fat Components albo Dumb and Smart Components i być może jeszcze kilka innych podobnych ;) Wszystkie te określenia oznaczają to samo: Podział komponentów na 2 rodzaje: Służące prezentacji oraz zawierające logikę.

https://typeofweb.com/projektowanie-komponentow-presentational-container-components

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Paweł		2019-01-04 11:27

Korzystając z reduxa nie warto tworzyć głupich komponentów, a reduxa podpiąć do containera? Nie jest to czystsze rozwiązanie? Wszak trzeba przekazać propsy do komponentów, ale zawsze taki komponent można użyć z danymi z innego stora/reducera. Dodatkowo akcje mamy w jednym miejscu.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Dokładnie to tutaj się dzieje. Nic nie stoi na przeszkodzie, żebyś np. komponentu ContactsFilter użył z innym wywołaniem funkcji connect i innymi danymi (albo też w ogóle bez Reduksa)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Piotr Aueternum	http://piotr-aueternum.ct8.pl/	2019-01-04 11:27

A może "współużywalny"? :D

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Nie wiem co gorsze :D

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Sikora		2020-05-06 14:37

pytanko, czy da się użyć kompozycji i jak?

class DataContainer extends React.Component {
state = { data: [], isLoading: false };

componentDidMount() {
this.setState({ isLoading: true });
fetch("/api/data") ...
}

render() {
const {children} = this.props;
return children
}
}

i jak później przekazać te dane

(???) {this.props.data.x}

// propsy nie działają

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-05-06 21:15

Da się. Rozwiązania są dwa:

1. Funkcja React.cloneElement
2. Tzw. "render prop" i to jest raczej polecany sposób :) Wtedy wygląda to tak: https://gist.github.com/mmiszy/0d10604a613f7d154142db1ce78b1753

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Sikora		2020-05-13 09:07

thx, działa fajnie ;). Pytanie teraz takie .. generalnie czy powinienem tak robić ;) ...
w render () uruchamiam i jeśli są już dane uruchamiam updateApp i ustawia się state App. Ale wszystko to odbywa się w render App .. jeśli jest to złe to jak inaczej to robić na zasadzie odpalania komponentów które póżniej modyfikują App?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Sikora		2020-05-06 14:37

pytanko, czy da się użyć kompozycji i jak?

class DataContainer extends React.Component {
state = { data: [], isLoading: false };

componentDidMount() {
this.setState({ isLoading: true });
fetch("/api/data") ...
}

render() {
const {children} = this.props;
return children
}
}

i jak później przekazać te dane

(???) {this.props.data.x}

// propsy nie działają

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Sikora		2020-05-18 13:13

Kiedyś widziałem fajny przykład komponentu .. coś w ten deseń:



Dzięki takiemu zapisowi z automatu przydzielało dane do odpowiedniej kolumny + wyświetlało nagłówek .. jakieś wskazówki jak można coś takiego osiągnąć? Próbowałem kilku rzeczy ale jakoś nie podziałało :( a zapis jest niezwykle czytelny.

 
 

Komentarz zaimportowany z WordPressa