Front-end Web Development with React (Week 3)

• Forms
  • Elements in HTML forms maintain their own state and update according to input

• Controlled Components
  • A React component controls the form it renders
    • Single source
    • Tie the form state to component state
  • State mutation has an associated handler function
  • Form Validation

• Uncontrolled Components
  • Handle the form data by the DOM itself
  • Instead event handle for state update, use a ref to get from values from the DOM

• Uncontrolled Form
  • innerRef={(input) => this.username = input} to extract the value

• Design Patterns
  • Well-documented solution to a recurring problem
  • Software design pattern
    • Reusable solution to commonly occurring problems
  • The Model-View-Controller (MVC) Framework
    • Goal:
      • Isolation of domain logic from user interface
      • Permits independent development, testing and maintenance (separation of concerns)

• View – presents the information to the user
• Model – stores domain state and domain logic and provides way of manipulating this state from the rest of the application
• Controller – mediates between the view and the model

• Flux Architecture
  • Initially React was viewed as the “V” in MVC
  • Issues with standard MVC architecture pattern
    • Problems with cascading updates, decentralized mutations, race conditions
  • Unidirectional Data Flow

• Redux
  • Predictable state container for JavaScript apps
  • Main principles:
    • Single source of truth
      • Single state object tree within a single store
    • State is read-only (only )
      • Changes should only be done through actions
    • Changes are made with pure functions
      • Take previous state and action and return next state
      • No mutation of the previous state
  • Single store and single state tree enables
    • Logging
    • API handling
    • Undo/redo
    • State persistence
    • “time-travel debugging”

• Redux Concepts
  • State – stored in plain JS object
  • Action – plain JS object with a type field that specifies how to change something in the state
  • Reducer – pure functions that take the current state and action and return a new state
    • Update data immutably

• Redux Store
  • Holds the current state value
  • Created using createSore()
  • Three methods
    • dispatch() – states state update with the provided action object
    • getState() – returns the current stored state value
    • subscribe() – accepts a callback function that will be run every time an action is dispatched

• React with Redux
  • react-redux package for bindings between React and Redux
    • connect() – generates a wrapper “container” component that subscribes to the store
      • mapStateToProps() – called every time store state changes, returns an object full of data with each field being a prop for the wrapped component
      • mapDispatchToProps() – receives the dispatch() method and returns an object full of functions that use dispatch()
    • Surround your App root with <Provider>
      • Takes the store as an attribute
      • Makes store accessible to all connected components

• React-Redux-Form
  • Collection of reducer creators and action creators
  • Form data stored in Redux store in a model
  • Validation supports
• LocalForm
  • Maps form model to local state of the component
  • No need of form data persistence across component mounting/unmounting
  • Validation supports retain