Czesc ucze sie stacku: react + redux i mam pytanie z nim zwiazanym. Ogolnie programowalem w Angularze i cala architektura, m.in moduly juz byly, wiec tam sprawa wygladala jasno, nie wiem jak to jest z reactem. Mam aplikacje A i chcialbym importowac druga aplikacje B jako modul, nie zapominajac o tym ze aplikacja B jest reactem z reduxem, tak samo aplikacja A. Wszedzie widzialem takie proste apki, nie wiem jak to wyglada z aplikacjami bardziej zlozonymi zeby wstrzykiwac do aplikacji zewnetrzne moduly (komponenty / store reduxa)
0
1
React + Redux nie ma swojego systemu modułów jak Angular (i dobrze) - używa się standardowych modułów ES6 (zalecane) lub CommonJS.
0
i dobrze
Mozesz rozwinac mysl? Czyli jezeli zminuje sobie taka paczke z komponentami i store to po prostu mam ja importowac w projekcie normalnie przez es6 chociazby? Wiem, ze swego czasu np. firebase'a dodawalo sie do mixinu w komponencie, wiem ze mixiny juz nie istnieja i korzysta sie z hoc, w ten sposob tez mozna jakos modularyzacje wykonac?
1
Generalnie to jest tak, że w każdym normalnym języku istnieje coś takiego jak moduły na poziomie języka. JavaScript (a także np. PHP) nie były językami normalnymi, więc JavaScript nie zapewniał żadnego systemu modułów, każdy framework czy projekt mógł pracować na innych modułach (w tym AngularJS wymyślił sobie własne moduły, a raczej pseudo-moduły).
generalnie tak wyglądał jeszcze niedawno światek modułów w JS https://xkcd.com/927/
Teraz się to zmieniło, w ES6 jest jż system modułów na poziomie i się robi coś takiego:
import React from 'react'
czy
import {jakasZmienna} from './jakis-plik.js'
I są to prawdziwe moduły, na poziomie języka programowania.
Problem w tym, że żadna przeglądarka tego nie obsługuje, więc trzeba kod transpilować za pomocą Babel.
Inne popularne rozwiązanie to CommonJS, czyli system modułów wymyslony pierwotnie na potrzeby NodeJS, jednak da się z niego korzystać w przeglądarce za pomocą budowania apki przez Browserify czy Webpack.
Tyle technikalia, a w praktyce to chodzi o to, żeby podzielić aplikację na pliki-moduły i te pliki importować np. jeśli masz w jednym katalogu:
main.js
reducer.js
to z main.js możesz zrobić coś takiego:
var reducer = require('./reducer.js');
czy import reducer from './reducer.js'
oczywiście, żeby zadziałało, musisz odpowiednio to zbudować (np. Webpack + Babel), no i odpowiednio eksportować te zmienne (ale to sobie doczytasz. Albo CommonJS wpisz w Google, albo ES6 modules). Zajrzyj też do jakichś projektów open source, np. do kodu Reduxa, w każdym pliku masz różne export czy import: https://github.com/reactjs/redux/tree/master/src
0
@LukeJL Ja to wszystko wiem bo pisze w pracy normalnie w es6 :P tylko nie znam mozliwosci reacta i reduxa na tyle zeby wiedziec ktore rozwiazania sa najlepsze. Wiem, ze nie zaleca sie robic kilku store, a zamiast tego tworzy sie po prostu kompozycje reducerow. A mi chodzi o przenoszenie pewnych komponentow z aplikacji do aplikacji. Czyli musze bazowac caly czas na tym jednym store i dodawac jedynie nowe reducery?
0
Krzywy Samiec napisał(a):
Czyli musze bazowac caly czas na tym jednym store i dodawac jedynie nowe reducery?
Generalnie taka właśnie jest idea Reduxa - cały store w jednym miejscu, nawet robiąc dużą aplikację tego nie zmieniasz, oczywiście nie musisz na raz przetwarzać całego store - po to masz właśnie combineReducers, by zamiast jednego głównego reducera mieć kilka (kilkanaście), każdy operujący na swoim kawałku store'a. Dzięki temu debugowanie jest proste, a undo / redo sprowadza się do prostego przełącznia między snapshotami store'a.
0
@Maciej Cąderek dzieki wielkie! O taka odpowiedz mi chodzilo, juz wszystko wiem. Wspomniales cos o debugowaniu.. jakie sa najlepsze narzedzia do debugowania takiego stacku?
0
Poza standardowymi metodami masz takie cudo jak: https://github.com/gaearon/redux-devtools