![10
Redux
REDUX REDUCER
“changes are made with pure functions”
// Impure functions
function square(x) {
updateXInDatabase(x);
return x * x;
}
function squareAll(items) {
for (let i = 0; i < items.length; i++) {
items[i] = square(items[i]);
}
}](https://image.slidesharecdn.com/15410006-240530174627-6884f3b3/85/The-Redux-Introduction-in-react-and-applications-10-320.jpg)
The Redux Introduction in react and applications .
- 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 function appReducer(state, action) { switch(action.type){ case RATE_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 const RATE_COURSE = 'RATE_COURSE';
- 8. 8 Redux function myReducer(state, action){ switch (action.type){ case INCREMENT_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 function square(x) { return x * x; } function squareAll(items) { return items.map(square); }
- 10. 10 Redux REDUX REDUCER “changes are made with pure functions” // Impure functions function square(x) { updateXInDatabase(x); return x * x; } function squareAll(items) { for (let i = 0; i < items.length; i++) { items[i] = square(items[i]); } }
- 11. 11 Redux FORBIDDEN IN 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) const store = 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
- 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