react-state-rxjs
  • Introduction
  • Main differences
  • Performance first
  • GETTING STARTED
    • Instalation
    • Examples
  • Core concepts
    • Main idea
      • More complex flow visualization
    • Configuration
    • Store
      • Operators
      • Optimistic updates plugin
      • Form manager plugin
        • ShouldUpdateState hook
        • Custom form elements
      • Persist state plugin
        • Configuring custom storage
    • Actions
      • Immer
      • ImutableJs
      • Async
    • Components with Actions
    • @InjectStore decorator
    • @ComponentState decorator
    • ComponentState Hook
    • Dispatcher
    • Router / History
  • DIFFERENT SCENARIOS
    • Passing list item index via router
  • UNIT TESTING
    • Setup
    • Test store
    • Test actions
    • Test component with actions
    • Test with Enzyme
  • Debugging
    • Setup
    • Redux DevTools
    • Automated changes output
    • Manual state changes check
    • Additional debugging information
  • Production
    • Production mode
  • Other information
    • Best practices
    • CLI
      • Custom Configurations
    • Performance
    • Blog Posts
    • Contributing
Powered by GitBook
On this page

Was this helpful?

  1. Core concepts
  2. Store

Form manager plugin

PreviousOptimistic updates pluginNextShouldUpdateState hook

Last updated 6 years ago

Was this helpful?

This plugin simplifies working with HTML forms. It keeps in sync state and form values. To do this you need to access store from actions:

this.formStateManager = this.action.store.form
            .bind(this.form.current)
            .sync();

or from imported Store

this.formStateManager = Store.store.select(['form']).form
            .bind(this.form.current)
            .onChange(state => this.forceUpdate())
            .sync();

Please note that to keep view updated we are adding onChange callback and updating view which is not necessary if you accessing store from actions.

from now on all changes made in state will be reflected in form and visa-versa.

Form plugin returns object with two methods:

  • Reset - resets form to initial state

  • Destroy - method that should be called from your ngOnDestroy method

As a second parameter of bind method some parameters can be passed:

  • debounceTime - time to wait until changes are synced. Default: 100ms

Please note that input element type="file" is not synced. For this you will need to write custom element. See section

Custom form elements