The Redux Introduction in react and applications .

This is redux concept in react

1. 1
Redux
IVAN LOVRIĆ

2. 2
Redux
Open-source JavaScript library
Designed for managing application state

3. 3
Redux
Simple
No setup
Complex
Significant setup
JS jQuery React React + Redux
Complex data flows
Inter-component communication
Non-hierarchical data
Many actions
Same data used in multiple places
WHEN DO I NEED REDUX?

4. 4
Redux
ACTIONS
REDUCERS
STORE
PURE FUNCTIONS
IMMUTABILITY
WHAT ARE WE GOING TO LEARN:
REDUX
…AND MORE

5. 5
Redux
One immutable store Actions trigger changes Reducers update state
3 PRINCIPLES OF REDUX

6. 6
Redux
REDUX FLOW
Action
Store
React
Reducers
functionappReducer(state, action) {
switch(action.type){
caseRATE_COURSE:
// return new state
}
}
{ type: RATE_COURSE, rating: 5 }
Notified via React-Redux

7. 7
Redux
REDUX ACTION
rateCourse(rating){
return { type: RATE_COURSE, rating: rating}
}
{ type: RATE_COURSE, rating: rating}
REDUX ACTION CREATOR
USING ACTION CONSTANTS
export constRATE_COURSE = 'RATE_COURSE';

8. 8
Redux
function myReducer(state, action){
switch(action.type){
caseINCREMENT_COUNTER:
// return new state based on action passed
}
}
REDUX REDUCER
“state is read-only”

9. 9
Redux
REDUX REDUCER
“changes are made with pure functions”
// Pure functions
functionsquare(x) {
returnx* x;
}
functionsquareAll(items) {
returnitems.map(square);
}

10. 10
Redux
REDUX REDUCER
“changes are made with pure functions”
// Impure functions
functionsquare(x) {
updateXInDatabase(x);
returnx* x;
}
functionsquareAll(items) {
for(leti= 0; i< items.length; i++) {
items[i] = square(items[i]);
}
}

11. 11
Redux
FORBIDDENIN REDUCERS
Mutate arguments
Perform side effects
Call non-pure functions

12. 12
Redux
ALL REDUCERS ARE CALLED ON EACH DISPATCH
loadStatus
courses
authors
{ type: DELETE_COURSE, 1 }
New State

13. 13
Redux
REDUX REDUCER
“slice of state”
Red
ucer
Red
ucer
Red
ucer
State
Store

14. 14
Redux
store.dispatch(action)
store.subscribe(listener)
store.getState()
replaceReducer(nextReducer)
conststore = createStore(reducer);
REDUX STORE
“single source of truth”

15. 15
Redux
IMMUTABILITY
“to change state, return a new object”
state = {
name: ‘Ivan’,
role: ‘developer’
}
state.role = ‘admin’;
return state;
state = {
name: ‘Ivan’,
role: ‘developer’
}
return state = {
name: ‘Ivan’,
role: ‘admin’
}
MUTATING STATE NOT MUTATING STATE

16. 16
Redux
IMMUTABILITY
“to change state, return a new object”
Object.assign(target, ...sources)
Object.assign({}, state, { role: ‘admin’ } );
SIGNATURE
EXAMPLE
Handling Immutable State
Object.assign
Spread operator
Lodash merge
Lodash extend
Object-assign
react-addons-update
Immutable.js
ES6 ES5 LIBRARIES

17. 17
Redux
Clarity
Performanse
Awesome sauce
WHY IMMUTABILITY?
Q:“Huh, who changed that state?”
A:“The reducer, stupid!”
Q:“Has this changed?”

18. 18
Redux
SUMMARY:DATA FLOW
Store UI
Redux Action
State
defines
triggers
sent to
updates
contains

19. 19
DEMO
https://bitbucket.org/IvanLovric/fesb-react-redux

20. 20
Redux
ACTIONS
Represent user intent
Must have a type
STORE
dispatch, subscribe, getState…
IMMUTABILITY
Just return a new copy
REDUCERS
Must be pure
Multiple per app
Slice of state

21. 21
CAREERS

22. 22
Q&A