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
  1. Other information

Best practices

and recommendations

PreviousProduction modeNextCLI

Last updated 5 years ago

Was this helpful?

CtrlK

Was this helpful?

Here you will find some recommendations in order to not miss use this library

  • Actions should be used ONLY for manipulating state. They should not cntain business logic or call other services

  • Try to avoid absolute paths in @InjectStore decorator because

    • it might lead to wrong architecture of your project

    • paths might become long

    • paths can start to overlap

  • Direct store usage should not be common, rather exceptional case. e.g: you might have some shared data like userData stored in the root of you state and you want to access it from everywhere. But for this case I recommend to have some authService and with method getUserData rather than keep repeating same code (DRY principle)

  • User Smart and dumb components

  • User @InjectStore decorator ONLY on smart components

  • Entire application with smart components should reflect structure of state as close as possible.

State Structure
getUserData() {
    let userData;
    
    Store.store
        .select<UserData>(['userData'])
        .pipe(take(1))
        .select(state => userData = state);
        
    return userData;
}