Thursday, 8 March, 2018 UTC


Summary

  • Typed actions are implemented using action type enum and corresponding action classes with type property and optional typed payloadTyped stateIt is very useful to define a type of the state object which is managed by the reducer.
  • Typing return value of our reducer is in fact the main ingredient for enabling great Typescript support discussed in this article… – Example of a todos.reducer.ts file with all necessary type declarations for proper type-checking and code-completion supportCreating new state using Object.assign()To make our reducer useful we have to provide…
  • Returning of a new object has additional benefit of making implementation immutable which helps with the performance of our app, especially with change detection.Letâ€s focus on the FILTER action which updates a value of the filter property in our state.
  • After all, weâ€re using Typescript and we are interested in the benefits it has to offer… – Objects with additional properties which are not specified in the type of the reducer state will unfortunately NOT produce type errors…We can make this work by using Typescript generics and specifying a type…
  • Editor code completion supportAnother huge benefit of this approach is the great code completion support from IDEs like Webstorm ( IDEA) or VS Code… – Great Typescript powered code-completion support in Intellij IDEA editorCode-completion is one of the best productivity related benefits of using TypescriptImagine a huge code base with many…
Ngrx is a state management library which is used to implement one way data flow with centralized state store. Components and services dispatch actions in response to events triggered by user…
@julienevano: “Object.assign() vs Object Spread { … } In Angular Ngrx Reducers” by @tomastrajan
All the code examples in this post are taken from the real world Angular Ngrx Material Starter project in various stages of itâ€s developmentShort recapitulation of Ngrx state libraryNgrx is a state management library which is used to implement one way data flow with centralized state store. Components and services dispatch actions in response to events triggered by user interaction and server communication.
Every dispatched action produces a new application state by triggering corresponding reducer action handler. In the handler we always want to return new object or array to be sure that our new application state is clearly distinct from the old one.
That way we achieve immutability of our state which enables major performance optimizations by Angular (eg by using OnPush change detection strategy) and results in less re-renders and a much faster application.
Providing type information for the reducerGeneral rule is that the more types we provide the more helpful Typescript compiler gets.
Typed actionsTyped actions are implemented using enum with the list of all supported actions and corresponding action classes. Every action class has type property which references single enum value. In addition, the constructor of the action class defines the type of a payload which is necessary to create the action.
This makes it impossible to make a mistake when creating new actionsMoreover, Typescript supports stuff with a fancy name called discriminated unions which come very handy when implementing Ngrx reducer actions handlers. In plain language, discriminated union…
Object.assign() vs Object Spread { … } In Angular Ngrx Reducers