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

Configuration

In your app's main module, register store with initial state by using ReactState.Init with with initial state object as a first variable and value for identifying is it prod environment as second parameter.

Immer

ReactState
.addDataStrategy(ImmerDataStrategy)
.init((routerHistory: History) => {
    ReactDOM.render(<Main history={routerHistory} />, document.getElementById("example"))
}, initialState)

ImmutableJs

ReactState
.addDataStrategy(ImmutableJsDataStrategy)
.init((routerHistory: History) => {
    ReactDOM.render(<Main history={routerHistory} />, document.getElementById("example"))
}, initialState)

where initial state looks like

export const initialState = {
    todos: <any[]>[],
    storage: {
        itemToStore: 'some value'
    },
    form: {
        condition: {
            new: true,
            used: false,
            notSpecified: false,
        },
        location: 'europe',
    }
};

In addition you can pass other variables to StoreModule.provideStore function

  • enableSSR- makes routing compatible with SSR

  • collectHistory - should history be collected at all - default is true

  • storeHistoryItems - how many items should be stored. Default is 100

PreviousMore complex flow visualizationNextStore

Last updated 6 years ago

Was this helpful?