The downsides of service driven state
Our tendency when building apps using angular is to bring the data from services, rendering the data in components and passing down values to child components down the components tree.
But this pattern becomes problematic when building big scale apps for the following reasons:
- Intermidiate propery passing – in order to pass state to other child components we need to use @input to pass values down the components tree.
This causes many intermediate components passing value that they aren’t necessarily concerned about. - Inflexible refactoring – for the previous mentioned reason, we also create coupling between parent and child components, which makes it difficult to place a component somewhere else in the hierarchy because we need to refactor all parents to pass the values.
- State troughout the app - Difficult to get a snapshot of the apps state, and knowing exactly which part of the app holds which state.
The principles of Redux
- Single source of truth – all of the different states of different services and components are saved into the store, an object that holds the complete state.
- Universal apps - This makes it possible to serialize state on server side and pass it to the client with no extra effort, thus making it easy to create universal apps.
- Easier to debug - or inspect the application
- Enables persistence of app state in development – makes for faster development cycles
- Some functionality becomes trivial to implement - for example Undo/Redo
- State is read-only
- The only way to change state is by emitting actions, an object describing what happened.
- Since state mutation is centralized, and changes happen one by one in a strict order, there is no subtle race conditions (which change happened first? and which changes are dependent on that change?).
- Since actions are plain objects they can be logged, stored, serialized for debugging and research.
- Changes are made with pure functions
- reducers are just pure functions that take the previous state and an action, and return the next state.
