Codemash 2018 – Introduction to React + Redux + Redux Observables

Presenter: Jason Farrell

• React is a library, not a Framework
  • Can use with Angular
• Concept is “Render Always”
  • Virtual Dom pattern
    • Real Dom only updates with delta react detects in Virtual Dom
    • All rendering takes place against virtual dom
    • Render is called frequently so virtual dom forces constant rendering
    • Real dom changes are batched so real dom is only updated when necessary
  • State
    • Prop
      • Readonly
      • Passed in to component as attributes
    • State
      • Data help by the component internally
      • Never update state directly
        • Use SetState
          • Reason react pushes determinism
          • State is never updated, only replaced
            • Immutability
          • Never read child state from parent
            • To do this pass in callback to child as property from parent
• Component Driven
  • Section of page is a component
    • Easier to manage
    • Easier to reusue
• Redux
  • Manages state
    • Reducers listen for all actions, act on ones it cares about does nothing with ones it doesn’t
      • Each reducer manages a slice of state
      • Reducers are commonly if..else or case statements
      • type has to be a property of object passed to dispatcher as reducers use it to switch on
    • Container
      • Connected component
      • Container wraps component
        • import container in component
        • allows injections of props from container
      • A method called ‘connect’
        • short cut to map to dispatch and actions
        • mapStateToProps
          • Maps properties to values in the store that you want your property to change with
        • mapDispatchToProps
          • Maps actions that should be sent to store that your component kicks off
    • Store should never know about a ‘selected’ something as that indicates improper coupling to the UI
    • Top level components should rely on store for maintaining and passing state.
      • Low level components should use props to communicate with parents
      • Should not use store
    • Redux has one store, where flux has many
• Briefly about RxJS – Observables
  • Observe and react to changes in a stream
  • Epic is an “Observable aware Reducer”
  • Epics go out and get the data
    • upon completion they will raise an event reducer will act on
    • state only changes when data is returned
  • Epics must return an observable
  • Written by netflix
  • applyMiddleware must be imported to get Epics
    • Done in his configurestore method that is called in index.js