no-rxstate-imperative-in-reactive

Warns against mixing imperative RxState methods in reactive methods.

Rationale

Inconsistent mixing of reactive and imperative usage should be avoided in RxState. Using an imperative method (state#set or state#get) in the context of a reactive method (state#hold or state#connect) is a confusing mixing of paradigms, when there is usually a better solution available. E.g. calling state#set in state#hold may be replaced with the more declarative state#connect.

Examples

❌ Examples of incorrect code for this rule

@Component({
  template: '...',
})
class NotOkComponent implements OnInit {
  constructor(
    private service: SomeService,
    private state: RxState<{ something: any; somethingElse: any }>
  ) {}

  ngOnInit(): void {
    this.state.connect(
      'something',
      this.service.something$.pipe(
        map((something) => ({
          ...something,
          ...this.state.get('somethingElse'),
        }))
      )
    );
  }
}

@Component({
  template: '...',
})
class NotOkComponent {
  constructor(private service: SomeService, private state: RxState<MyState>) {
    state.hold(this.service.getData(), (data) => {
      state.set({ data });
    });
  }
}

✅ Examples of correct code for this rule

@Component({
  template: '...',
})
class OkComponent {
  constructor(state: RxState<never>, service: SomeService) {
    state.hold(service.onRefresh$, () => {
      window.location.href = '/';
    });
  }
}

@Component({
  template: '...',
})
class OkComponent {
  constructor(private state: RxState<MyState>, service: SomeService) {
    this.state.connect('data', service.getData());
  }

  handleClick() {
    this.state.set({ clicked: true });
  }
}