biophoton/angular-ngrx-refactoring

How to upgrade to ngrx store showed in a step by step example

angular-ngrx-refactoring's Issues

5. Using ngrx in feature modules

Below you have a check list to follow.
A detailed step by step description on how to solve the exercise is in the wiki.

• Create a new folder state-management under pages/flight
• remove flightReducer form app.module.ts
• Move ngrx/flight.actions.ts and ngrx/flight.reducer.ts to the newly created folder state-management
• Register flightReducer in pages/flight/state-management by using the StoreModule.forFeature method
  • Adopt imports
• Register flightEffects in pages/flight/state-management by using the EffectsModule.forFeature method
  • Adopt imports
• Refactor the ngrx folder. Create .module for global state management file and move IDB interface into separate file.

0. Preconditions

Below you have a check list to follow.
A detailed step by step description on how to solve the exercise is in the wiki.

• Download or clone the repository
• Run npm install in you console
• Try to test your app in by running ng serve in your colsole

1. Manage state with @ngrx/store

Below you have a check list to follow.
A detailed step by step description on how to solve the exercise is in the wiki.

• Preconditions
  Install @ngrx/store module over npm npm install --save @ngrx/store
• Implement the store
  • Setup StoreModule and IDB interface in app module
  • Setup actions to change the stores state
  • Setup reducer
  • Register the reducer
  • Subscribe to changes and dispatch actions
• BONUS Refactor to selector functions
  • Create selector function in flight.reducer.ts
  • Use selector function in flight.service.ts
• BONUS Implement state for flightPending State
  • Extend actions
  • Extend reducer
  • subscribe to changes and dispatch actions

How to use Store State from another Feature Module?

Hello,
Any idea on how to access the State inside a Store from another Feature module?

Thanks

Filter not working

Hi,

I have found a mistake in your code.

Please, consider this statment:
.filter((n: any) => {
return n.payload.event.url.indexOf('flight')
})

The indexOf method returns the index of the element or -1 if the element not exists.
However, your filter expects a boolean value (true or false), so under the hood, the value will be converted to boolean. But if you check Boolean(-1) it returns true.
Therefore this filter will always return true.

To make it works you have to compare it with -1:
.filter((n: any) => n.payload.event.url.indexOf('flight')) !== -1

3. Encapsulate side effects with @ngrx effects

Below you have a check list to follow.
A detailed step by step description on how to solve the exercise is in the wiki.

• Preconditions
  • Install @ngrx/effects module over npm npm install --save @ngrx/effects
• Implement moule
• Extend FindFlight action with params
• Setup effects class
• Move side effect logic into effect
• Add params to dispatched action

4. Handling router state with @ngrx/router-store

Below you have a check list to follow.
A detailed step by step description on how to solve the exercise is in the wiki.

• Implement custom logic to keep in sync with url
• Sync form with url params
• Implement router and register reducer and extend state
• Implement an effect that handles the new router-store actions
• Remove manual find calls on url change
• BONUS - Implement a custom RouterStateSerializer
  • Create serailizer
  • Setup a provider for the Serializer

2. Enable @ngrx/store-devtools

Below you have a check list to follow.
A detailed step by step description on how to solve the exercise is in the wiki.

• Preconditions
  • Install @ngrx/store-devtools module over npm npm install --save @ngrx/store-devtools
• Implement and configure dev tools