The repository is a simple Ionic 5 (Angular 2+ based) application. It contains examples of integration and usages of @redux-multipurpose suite tools. All redux packages are installed as @redux-multipurpose/core dependencies, and all features were created and integrated using @redux-multipurpose/angular-cli.
After project cloning, provide following commands:
npm install
ionic serve
## Features The project integrates a @reduxjs/toolkit package based redux store with following features enabled:
- sagas (redux-saga package)
- epics (redux-observable-es6-compat package)
- persistence (redux-persist package)
- responsiveness track (redux-responsive package)
- logger (redux-logger package for development purpose)
- routing track and management (@redux-multipurpose/angular-router package)
All these features can be enabled or not during store creation by interactive cli of @redux-multipurpose/angular-cli package. During files creation, these are configured or not on @redux-multipurpose/core package providing related arguments to initializeStore call.
There are only two pages in the app:
- home
- test-detail
and a simple splash component.
Let's start redux features description
The redux store state is divided into 5 static substates:
- browser
- router
- secureStorage
- storage
- ws
and 2 dynamic other:
- splash
- currentTest
Ws substate mantains web services call data informations and calls states. In the app there are two example calls. The first one of example data retrieved on app launch, the second one of test data retrieved on click of a "Retrieve tests" button on the home page. Test data substate is organized with the use of a @reduxjs/toolkit data adapter to show differences with the example data organized without an adapter. Please refer to @reduxjs/toolkit documentation for data adapter usage.
After test data retrieve, the user can navigate to a simple test data detail, clicking on a single test item.
To show dynamic reducer mount, the currentTest substate mantains the selected test data, and it is mounted at the init of test-detail page component, and unmounted on its detroy. These mount/unmount operations are done by ReducerInjector and ReducerDeallocator decorators on test-detail page, and they need the implementation of OnInit and OnDestroy angular callbacks.
Another dynamic substate of the app is the splash substate that mantains informations about its fade transitions state (active/inactive states included). It's mounted on init of AppComponent, and unmounted on splash component destroy, using the same decorators previously described. The other actions in the middle are triggered using and epic.
To show the usage of redux-observable epics feature, the splash fade animation is driven by a dynamically mounted epic. The epic transition in included in the splash.epics.ts file, and its mount/unmount is located into ngOnInit and ngOnDestroy Angula methods of the splash component. In this way, the animation epic and also splash substate are totally deallocated after first splash component usage.
The app let the user to save both example and test data using redux-persist feature.
The first one is persisted using a simple unsecure storage method (storage substate), the second one is secured by a simple key (substate secureStorage), generated by @redux-multipurpose/angular-cli during reducer commutation to a persisted reducer (note that the cli let the developer to persist only a previous created substate). The best way is to retrieve a secure storage key from a backend system.
To show sagas usage (redux-saga feature), in the header of the home page there is a reset button that resets ws data substate and the favourites storages. On button press, a resetAll action is intercepted, and three other reset actions are dispatched.
The browser substate mantains informations about window size and updates them on window resize event (redux-responsive feature).
The router substate mantains infos on the current link of page navigation (@redux-multipurpose/angular-router feature). On test-detail page there's also an example on goToUrl action dispatch on 'Return to home' button press. The dispatch of this action let to navigate to the desired url.