006. React - Redux framework

006. React - Redux framework

• 1.
  006. REDUX FRAMEWORK Presenter:Binh Quan
• 2.
  ReactJS - Redux ❖Why Redux ❖ Store, Actions and Reducer ❖ Redux Alternatives
• 3.
  ReactJS - WhyRedux ❖ State management for whole system ❖ One store / Multiple Reducers ❖ Connecting React components ❖ Dispatching events ❖ Server rendering (you don’t need any special API to manage)
• 4.
  ReactJS - withoutRedux
• 5.
  ReactJS - withRedux
• 6.
  ReactJS - withoutRedux vs with Redux
• 7.
  ReactJS - moreabout Redux Read more: ★ https://css-tricks.com/learning-react-redux/ ★ https://blog.jumpcut.com/why-redux-why-now- 32b3f95b59b#.4drj7z90i
• 8.
  ReactJS - Reduxterms Terms in Redux ❖ Application state ➢ State vs Stateless ❖ Reducers ❖ Store ❖ Provider ❖ Actions ❖ Dispatch
• 9.
  ReactJS - Reduxflow Basic flow ❖ Application state ❖ Reducers ❖ Store ❖ Provider ❖ Actions ❖ Dispatch
• 10.
  ReactJS - Reduxside effects with API middleware Side effects with API middleware ❖ Application state ❖ Reducers ❖ Store ❖ Provider ❖ Actions ❖ Dispatch
• 11.
  ReactJS - Reduxflow More explanations: ★ https://github.com/reactjs/redux/issues/653
• 12.
  Reducers The Reducer isfunction that takes the previous state and an action, processing previous state then return next state. Note: ❖ Each reducer often contains initial state ❖ Next state is not that old state with modification. It’s completely a new object New state (object) is returned after processing old state
• 13.
  Store Store with singlereducer
• 14.
  Store Store with multiplereducers
• 15.
  Provider Provider is topComponent that used to connect Redux store and React Component
• 16.
  Actions Actions are payloadsof information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().
• 17.
  Dispatch Dispatch is themethod of sending data from component to store for processing according to specific action.
• 18.
  Get application state
• 19.
  Bind dispatch to ReactComponent
• 20.
  Now Demo