https://github.com/flowup/entry-task
https://github.com/flowup/entry-task
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/flowup/entry-task
- Owner: flowup
- Created: 2018-11-28T16:02:40.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-06-20T15:02:10.000Z (about 4 years ago)
- Last Synced: 2025-02-15T16:51:51.999Z (over 1 year ago)
- Language: TypeScript
- Size: 758 KB
- Stars: 0
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Entry Task (Example Solution)
## Directory Structure
The `app` directory contains the following directories:
- `actions`
- `components`
- `directives`
- `effects`
- `guards`
- `interceptors`
- `models`
- `pipes`
- `reducers`
- `selectors`
- `views`
## Routing
`@ngrx/router-store` is not used for maximum flexibility. Instead the following routing-related entities occupy the app:
- `RouteModel`
- `NavigateAction`
- `StoreRouteAction`
- `routeReducer`
- `RouteEffects`
- `whenNavigated()`
- `NavigateDirective`
### Example Use-case
1. A link with the `[appNavigate]="{view: RoutePath.Recipes, id: recipe.id}"` directive is clicked. The directive dispatches a `NavigateAction` with the inputted `RouteModel` as its payload.
2. Each instance of the `whenNavigated()` operator (hooked onto the `actions$: Actions` observable) catches the `NavigateAction` and passes the `RouteModel` in its payload to the passed-in mapper function.
1. Based on the specified predicate, the mapper function defined in the `RecipeDetailEffects.requireRecipeById$` effect returns a new `GetRecipeRequestAction`, which is therefore dispatched.
2. The `RecipeDetailEffects.getRecipeById$` catches the `GetRecipeRequestAction` and triggers the resource's retrieval.
3. The `RouteEffects.navigate$` effect also catches the `NavigateAction`, serializes the `RouteModel` in the action's payload to a URL and passes it to the `Router.navigateByUrl()` method.
4. The router's navigation cycle begins. The `RecipeDetailGuard.canActivate()` method is invoked (due to routes config in the `AppRoutingModule`) and allows the routing to continue only when the necessary resource (recipe detail) has been loaded.
5. The router's navigation cycle ends with the `NavigationEnd` event, which gets caught by the `RouteEffects.storeRoute$` effect. The URL carried by the event is parsed into a `RouteModel`, which becomes the payload of a newly dispatched `StoreRouteAction`.
6. The `routeReducer` catches the `StoreRouteAction` and stores the `RouteModel` in its payload in the `route` slice of the app state.