Some of the common problems that seem to arise again and again

• Where is the state of my application?
• What is the state of my application?
• How do I share this state across multiple components?

Combing Redux, Angular, and a bindings library called ng-Redux, we solve these problems

• View the entire state of your application
• Derive your UI from this state
• See how actions modify the state of your application

How it works

Button

text

color

List of elements

• Apple
• Pear
• Tangerine

Click on button

Store

buttonState (text, color)

listOfElementsState (fruit names)

Create Action

Why?

To modify state in store

In action we decide which state to modify

Bind state to UI

Bind state to UI

How it works without Redux

Approach #1. Use broadcasting

Button

text

color

List of elements

• Apple
• Pear
• Tangerine

Click on button

modifies state directly in controller

Controller

buttonState (text, color)

Binds state to UI

$rootScope

Event bus

Sends event to update list of elements

Controller

listOfElementsState (fruit names)

Binds state to UI

Listen events and updates state of list

Approach #2. Use a cache store

Button

text

color

List of elements

• Apple
• Pear
• Tangerine

Click on button

modifies state directly in controller

Controller

buttonState (text, color)

Binds state to UI

Cache

Saves to cache

Controller

listOfElementsState (fruit names)

Binds state to UI

Fetch from cache

Let's imagine now we need to update several components with this button

1. Controller of the button knows all components which have to be updated

Controller

Components

Components

Components

Components