Object.assign() vs Object Spread { … } In Angular Ngrx Reducers🥊

Tomas Trajan
6 min readFeb 27, 2018
Sleep as good as this cat, Typescript has your back covered! (📸 by Sabri Tuzcu)

How to get better type checking and code completion support with Typescript in Angular Ngrx reducers or any other Redux-like library

All the code examples in this post are taken from the real world Angular Ngrx Material Starter project in various stages of it’s development

Short recapitulation of Ngrx state library

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 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 reducer

--

--

Tomas Trajan

👋 I build, teach, write & speak about #Angular & #NgRx for enterprises 👨‍💻 Google Developer Expert #GDE 👨‍🏫 @AngularZurich meetup co-organizer