The Redux Introduction in react and applications .

The Redux Introduction in react and applications .

• 1.
  1 Redux IVAN LOVRIĆ
• 2.
  2 Redux Open-source JavaScript library Designedfor managing application state
• 3.
  3 Redux Simple No setup Complex Significant setup JSjQuery 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 AREWE GOING TO LEARN: REDUX …AND MORE
• 5.
  5 Redux One immutable storeActions 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 aremade with pure functions” // Pure functions function square(x) { return x * x; } function squareAll(items) { return items.map(square); }
• 10.
  10 Redux REDUX REDUCER “changes aremade 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 Mutatearguments Perform side effects Call non-pure functions
• 12.
  12 Redux ALL REDUCERS ARECALLED ON EACH DISPATCH loadStatus courses authors { type: DELETE_COURSE, 1 } New State
• 13.
  13 Redux REDUX REDUCER “slice ofstate” 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 StoreUI 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 Musthave 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