Kilka innych rozszerzeń
RxJs
RxJs jest niezależną biblioteką obsługującą zdarzenia asynchroniczne poprzez obiekty obserwatorów (Observe i Observable). Można ją integrować z Reactem i Reduxem.
Dzięki RxJs uzyskujemy strumień danych, do których można użyć metod tablicowych (takich jak map i filter). Podstawową funkcją Observable jest subscribe(), wywoływana z trzema parametrami:
- onNext() - wywoływana po wystąpieniu nowego zdarzenia.
- onError() - wywoływana po wystąpieniu błędu.
- onCompleted() - wywoływana po zakończeniu sekwencji zdarzeń.
Więcej informacji znajdziesz w podręczniku "Angular w przykładach", https://github.com/btroncone/learn-rxjs oraz RxR: https://dacz.github.io/rxr/index.html
React Hot Loader
Idea "Hot loadera" polega na tym, że w miejsce złożonego komponentu ładuje się jego prototyp z minimum funkcjonalności niezbędnych do wyświetlenia. Dopiero w chwili gdy komponent musi zareagować na otrzymane dane, ładuje się niezbędne do tego funkcjonalności, zastępując prototyp komponentem bardziej zbliżonym do oryginału.
Instalacja tego rozszerzenia wymaga zarówno zmian w wywołaniu ReactDOM.render() jak i procsu przygotowania aplikacji przez webpack. Więcej: https://medium.com/@baphemot/react-hot-module-reload-f6b3d34b9b86
Przykład:
import rootReducer from './reducers'
import { AppContainer } from 'react-hot-loader'
const render = () => {
ReactDOM.render(
<AppContainer>
<Provider store={store}>
<App history={history} />
</Provider>
</AppContainer>,
document.getElementById('root')
)
}
render()
// Hot reloading
if (module.hot) {
// Reload components
module.hot.accept('./App', () => {
render()
})
// Reload reducers
module.hot.accept('./reducers', () => {
store.replaceReducer(connectRouter(history)(rootReducer))
})
}
Zmienna modul.hot jest zmienną ustawiana przez webpack - gdy tryb "hot reload" jest włączony. Funkcja module.hot.accept włącza monitor zmian - tu: w komponencie głównym aplikacji (roota). W razie potrzeby jest po prostu uruchamiany ponowny rendering. Podobnie są obsługiwane reduktory.