Redux w forum internetowym.

Redux w forum internetowym.
DE
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 4 lata
  • Postów:53
0

Cześć, właśnie tworzę forum internetowe żeby poćwiczyć reacta i Noda. Uważacie że warto używać reduxa kiedy mamy backend i wszystko pobieramy przez http? Jestem w trakcie pisania back-endu. Forum nie będzie wybitnie skomplikowane. Tworzenie wątków, dodawanie/usuwanie komentarzy, logowanie i edycja profilu użytkownika, jakaś wyszukiwarka, liczenie odwiedzin i obserwowanie tematów. Sądzicie ze jest sens wciskać tam ten redux? Pytanie do doświadczonych kolegów : jak wy byście napisali frontend?

P2
  • Rejestracja:ponad 5 lat
  • Ostatnio:prawie 5 lat
  • Postów:84
0

Jak masz funkcje które muszą przechowywać jakiś stan to redux będzie tutaj dobrym pomysłem, imo lepiej go użyć żeby nawet tylko ogarnąć logikę za nim stojącą niż nie, bo jeśli chcesz klepać coś w react to bez reduxa albo jakiegoś mobixa do zarządzania stanem nie pociągniesz

Prędki_Lopez
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 4 lata
  • Postów:248
0

@piotrek2137: a do prostych rzeczy state + trzymanie stanu w serwisach/modelach (nie wiem jak to w react sie zwie) nie styknie? W angularze tez się robi moda na reduxa(ngrx), a w większości projektów to niepotrzebne jest.

P2
Pewnie i styknie ale fajnie zaczynać ogarniać reduxa od mniejszych projektów
Prędki_Lopez
True, do nauki jak najbardziej
DE
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 4 lata
  • Postów:53
0

No ja właśnie bardzo chce go użyć bo zawsze warto poćwiczyć. Zastanawiam się tylko czy wysyłanie zapytań bez użycia stora to nie jest przerost formy nad treścią i czy to poprawne.

Prędki_Lopez
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 4 lata
  • Postów:248
0

Hmm... Ale jak w ogóle,beż użycia stora? Jak budujesz jakiś widok/komponent to on ma jakiś stan. Ew. wyobrażam sobie, żę reducerów możesz nie użyć bo tylko wyświetlasz coś, ale store musi być. Ponadto skoro budujesz proste forum to użyjesz wszystkich funkcji.Przecież będzie można, dodawać, usuwać, edytować?

Edit: Jeśli to czysto do nauki to jak najbardziej się ucz.

edytowany 1x, ostatnio: Prędki_Lopez
dam1an
  • Rejestracja:prawie 12 lat
  • Ostatnio:prawie 3 lata
  • Lokalizacja:Warszawa
  • Postów:1589
0

Nie wyobrażam sobie aplikacji bez stora, poza takimi na prawdę małymi.
Dla nie dużych aplikacji możesz użyć Context API zamiast Reduxa.

DE
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 4 lata
  • Postów:53
0

No dobrze, w takim razie mam kolejne pytanie. Budujecie to małe forum i tworzenie wątków, dodawanie postow itp realizujecie przez requesty do MongoDB/Expressa. Skoro wszystko jest tak i różni użytkownicy mogą w tym samym czasie wykonywać jakieś akcje to jak ma się do tego redux? Co mógłbym ewentualnie łapać w te reducery? Sam system logowania oparty na JWT. Przez brak doświadczenia mogę kompletnie nie mieć racji dlatego pytam jak najlepiej to zrobić. :D tzn. wszystkie dane i tak lecą do stora bo potem musimy je wcisnąć do komponentów. i tyle?

edytowany 1x, ostatnio: Demafikalova
Prędki_Lopez
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 4 lata
  • Postów:248
2

Pomyliłeś(aś?) Zadania poszczególnych warstw systemu. Trzymaniem sesji, autentykacją zajmuje się backend i to on rozdziela zasoby "wlogowanym" użytkownikom. Reduxa używa się na frontendzie, tj. w przeglądarce. Używa się go bardzo upraszczając do łatwego komunikowania się między komponentami w mocno rozbudowanych systemach, ponieważ przekazywanie informacji przez kolejne warstwy komponentów jest nieproduktywne i trudne. Aplikacja w przeglądarce jest połączona tylko jedna sesją, jednego użytkownika. Każdy użytkownik po wejściu na stronę dostaje swój "osobisty" interfejs i wyjątkowe połączenie do serwera.

Edit: Jeśli dopiero zaczynasz programować, weź się może na początek za jedna warstwę backend albo frontend?

edytowany 2x, ostatnio: Prędki_Lopez
LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:10 minut
  • Postów:8398
0

Skoro wszystko jest tak i różni użytkownicy mogą w tym samym czasie wykonywać jakieś akcje to jak ma się do tego redux?

Z Reduxem jest tak, że rozwiązuje on pewnego rodzaju problemy, które występują w apkach reactowych (i nie tylko, bo Redux nie jest uzależniony od Reacta), jednak pod warunkiem, że zrobisz to odpowiednio. Jeśli nie, to być może wcale tych problemów nie rozwiąże (a może po prostu Redux nie będzie ci nawet potrzebny). Poza tym Redux oprócz rozwiązywania problemów, tworzy też nowe, więc trzeba się zastanowić, czy gra jest warta świeczki. Szerzej o tym pisze sam twórca Reduxa Dan Abramov w swoim artykule "You Might Not Need Redux":

https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

Przez brak doświadczenia

Na brak doświadczenia najlepsza jest praktyka i próbowanie różnych rzeczy. Moim zdaniem powinieneś tę apkę zrobić korzystając z tradycyjnego stanu w React, bo to jest domyślna opcja. A dopiero potem wysuwać wnioski np. "udało mi się zrobić apkę, Redux nie był potrzebny!" czy "pogubiłem się, użyję następnym razem Reduxa"(a samo użycie Reduxa nic nie gwarantuje swoją drogą), ew. możesz przerabiać apkę w trakcie. Na tym polega nauka.

Zastanawiam się tylko czy wysyłanie zapytań bez użycia stora to nie jest przerost formy nad treścią i czy to poprawne.

Ale wysyłanie zapytań i tak powinno być poza storem(tj. poza reducerami, które są odpowiedzialne za stan w store). Nawet używając Reduxa nie wrzuca się zapytań do reducerów (bo zniszczyło by to całą ideę, że reducery mają nie mieć skutków ubocznych), tylko się robi np. w middleware.

jak wy byście napisali frontend?

Kwestia Redux czy nie Redux to kwestia drugorzędna. Ważniejsze jest oddzielenie widoku od danych - komponent powinien się wyświetlać na podstawie dostarczonych danych, ale komponent nie powinien wysyłać zapytań na serwer, bo nie od tego on jest. Tylko tutaj nie trzeba Reduxa, wystarczy wydzielić "warstwę" (np. osobny moduł), który będzie kontaktował się z serwerem (pomijając kwestię synchronizacji, że komponenty muszą być powiadomione o tym, że są nowe dane ).

Przynajmniej jeśli chodzi o kwestię wysyłania danych.

A w apkach, które korzystają z Reduxa do tego, zwykle jest to tak rozwiązane, że po akcji użytkownika (np. kliknięciu) odpalany jest kod, który wysyła żądanie do serwera, a jak dane przyjdą, to jest odpalana akcja, w której są przekazywane dane z serwera. Jest akcja, a więc reducer się odpala i zmienia stan na podstawie tego co przyszło. Potem Redux widzi, że się zmienił stan i aktualizuje komponenty.


edytowany 3x, ostatnio: LukeJL
Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)