Redux in Angular 2+

Redux in Angular
Hung Nguyen Huy / Aug 2018

Agenda
1. Introduction
2. Component-based approach
3. Introduction to Redux
4. When to use Redux?
5. Redux Principles
6. Redux Building Blocks
7. Redux in Angular (with Example)
8. Summary

Introduction
● State management is absolutely critical in software development.
● One of the hardest aspects of a modern frontend application to get right.
● State is so complicated and use cases differ greatly across different applications.
● There are TONS of ways to manage application state.
● Two of the most popular approaches:
○ Component-based approach
○ Redux

Component-based approach
In Angular, React and most of the modern JavaScript frameworks/libs
“Components are the primary building blocks of our applications”

Advantages of Component-based approach
● Reusability
● Separation of concerns
● Extensibility
● Replaceability
● Reliability
● Keep projects structure Clean and Simple
● ...

Component-based approach
Components are stateful
● Each Component maintain their own state
(properties) and logic (methods) behind the
view (HTML).
● Encapsulation principle in OOP.
What is the PROBLEM?

Case Study - Facebook chat problem

Problems with Component-based approach
How Components can be updated and communicate
to stay IN SYNC with each others?

Before Redux
Frequently solutions to handle data architecture before Redux:
1. Events
=> Spaghetti code. Hard to manage.
2. Shared Services, through Dependency Injection
=> Unpredictable.
3. Manage state in a stateful parent component
Child components are stateless (just display stuff and don’t care about data flow)
Difficult to reuse components.
=> Parent components become really thick.
Refactoring happens so often, and become harder & trickier over time.

Before Redux
Shared Services through DI

Before Redux
Stateful Parent Component

With Redux
Centralized State Container
● Avoid keeping application state in UI
Component itself.
● Instead we can handle it in a Centralized State
Container - the Redux Store.
● Redux is the only one to know data and can
modify it.

With Redux
Components are now framework-agnostic

History of Flux/Redux
● Facebook Messenger problem - 2014
=> Introduce Flux Architecture.
● Redux is simplified and lightweight
implementation of Flux Architecture.
● Redux provides a clean and elegant
solution to the problem.

What is
?
A library that helps you manage the state
of your (large) applications
in a predictable way.

When to use Redux?
Use Redux only if you’re building a medium-to-large SPA with
complex views and data flow.

When to use Redux?
You may need Redux when your applications have:
● Sophisticated UI and Complex Data flow.
● Independent copies of the same data in multiple places.
● Multiple components that need to work with the same data and must be in sync.
● Data can be updated by multiple actors:
○ User actions
○ Server responses (Network callbacks)
○ Server notifications
○ …

Redux Principles
1. Single source of truth: Store
2. State is read-only
3. Changes are made with pure functions
Source: Redux documentation

Single source of truth
The entire state of the whole application
is stored in one single JS object
within a single Store.
(Since the entire state is represented in a single object,
we are able to keep track of changes over time.)

State is read-only
The only way to change the state is to dispatch an action.
(An action is a plain JS object describing what happened.)

Changes are made with pure functions
To specify how the state is transformed by actions, you write reducers.
(Reducers are pure functions that take the previous state and an action,
and return the next (new) state of the whole application.)

Store
● A Store is a single JS object that contains the state
of the whole application.
○ There is only a single Store in a Redux app.
○ We can think of the Store as a local client-side
database.
● Different components use different parts of the
state object depending on the functionality.
● Different components can use the same parts of
the state object, we don’t have multiple
independent copies.

Actions
● Actions are plan JS objects describing the changes.
● By convention, an Action object must has a “type” property (String).
● Action objects may have additional properties related to the event just
happened.
● The application state is read-only, and can only be modified by dispatching
Actions to the Store.

Reducer
● Reducer is a PURE function that specifies how the state changes in response to
an Action.
○ We can think of Reducer as an actions handler which determines how the state is changed.
● Reducer takes the previous state and the Action being dispatched, and returns
the next state of the whole application.
Reducer does NOT modify the state,
It returns the NEW state.
(Store will internally update the state)

Pure function
● A function is PURE if we give it the same input, we always get the same output. No
matter how many times we call that function.
● It must NOT have any side effects.

Redux in Angular 2+

More Related Content

Similar to Redux in Angular 2+ (20)

Recently uploaded (20)

Redux in Angular 2+