5. State management (contd.)
Redux
Motivation
Lost control over the when, why, and how of its state.
Single Source of truth is to hard to maintain.
Hard to reproduce bugs or add new features.
Handle optimistic updates, server-side rendering, fetching data before performing route transitions will be
impossible.
8. State management (contd.)
Three Principles
Single source of truth.
State is read-only.
The only way to change the state is to emit an action, an object describing (action.type) what
happened.
This ensures that neither the views nor the network callbacks will ever write directly to the state.
Changes are made with pure functions
Reducers are just pure functions that take the previous state and an action, and return the next state.
9. State management (contd.)
Action Creator
UI
Dispatch
Calculate and return
new store
Redux
Broadcast The Action
Object and the current
store
Reducer
Reducer
Reducer
Reducer
ReduxStore
Send the new store
to save it
Send Action Object
Send the new state
for updating
10. State management (contd.)
Action Creators & Actions
Actions are payloads of information that send data from your application to your store.
The only source of information for the store.
You send them to the store using store.dispatch() as it dispatch Action Creator.
11. State management (contd.)
Reducer
Specify how the application's state changes in response to actions sent to the store.Normal (Pure) function
Computes only the new state.
Should be completely predictable: calling it with the same inputs many times should produce the same outputs.
Shouldn't perform any side effects like API calls or router transitions.
You cannot update in state directly, you create a new object using Object.assign({}, state) then return it and the
redux will handle how to update the store.
You can split the reducer to sub-reducers to so you can maintain it easily then you can combine them
13. State management (contd.)
Store
You'll only have a single store in a Redux application.
If You want to split your data handling logic, you'll use reducer composition instead of many stores.
New Reducer = New Store
The store has the following responsibilities:
Holds application state;
Allows access to state via getState();
Allows state to be updated via dispatch(action)
14. State management (contd.)
Middleware
Redux middleware is nothing more than a function which is invoked after an action is dispatched but before a reducer takes care of
the action.
Middleware are functions that allow us extend the functionality of our redux application.
15. State management (contd.)
Broadcast The Action
Object and the current
store
on Creator
Send Action Object
Redu
Middleware#1
Middleware#2
Middleware#3
Middleware#4
17. (Activity) State management (contd.)
(Activity):
Write a sum method which will work properly when
invoked using either syntax below:
console.log(sum(2,3)) //5
console.log(sum(2)(3)) //5
22. Phenomenon whereby something
new and somehow valuable is formed
the created item may be intangible
such as an idea or a physical object
such as an invention, a literary work
Phenomenon whereby something
new and somehow valuable is formed
the created item may be intangible
such as an idea or a physical object
such as an invention, a literary work
Phenomenon whereby something
new and somehow valuable is formed
the created item may be intangible
such as an idea or a physical object
such as an invention, a literary work
LOREM IPSUM
DOLOR
LOREM IPSUM
DOLOR
LOREM IPSUM
DOLOR
Programmer Graphic
Designer
Author
TITLE HERE
23. TITLE HERE
Lorem ipsum dolor
sit amet, animal
conceptam te his,
Lorem ipsum dolor
sit amet, animal
conceptam te his,
Lorem ipsum dolor
sit amet, animal
conceptam te his,
Lorem ipsum dolor
sit amet, animal
conceptam te his,
TITLE HERE TITLE HERE TITLE HERE TITLE HERE
24. Lorem ipsum dolor sit amet, animal
conceptam te his, legimus inimicus dissentiet
at sed, cum an idque possit percipitur. Reque
accusamus has cu. Eam ex eros utinam, ut
alii saepe dignissim usu.
TITLE HERE
25. Lorem ipsum dolor sit amet, animal
conceptam te his, legimus inimicus dissentiet
at sed, cum an idque possit percipitur. Reque
accusamus has cu. Eam ex eros utinam, ut
alii saepe dignissim usu.
TITLE HERE
Lorem ipsum dolor sit amet, animal
conceptam te his, legimus inimicus dissentiet
at sed, cum an idque possit percipitur. Reque
accusamus has cu. Eam ex eros utinam, ut
alii saepe dignissim usu.
