Combing Redux, Angular, and a bindings library called ng-Redux, we solve these problems
Button
text
color
List of elements
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
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
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