RXJS 扫描 - withLatestFrom another observable

Question

I'm trying to work out how to use scan to derive a new state whenever my input observable emits a new value, but I can't seem to get it working.

I want to output a new State every time the input$ observable emits a new value, but it should be derived from the current value of state$.

Can anyone suggest how I can fix this? I have a feeling I've got the wrong idea altogether :-)

My code looks something like this:

const stateReducer = (state$: Observable<State>, input$: Observable<Input>) => {
  state$ = state$.pipe( startWith(DEFAULT_STATE) );

  const foo$: Observable<State> = input$.pipe(
    filter((input) => isFoo(input)),
    withLatestFrom(state$),
    scan((acc, ([input, state]) => {
        //returns derived state
    });

   const bar$: Observable<State> = input$.pipe(
    filter((input) => isBar(input)),
    withLatestFrom(state$),
    scan((acc, ([input, state]) => {
        //returns derived state
    });

   return merge(
     foo$,
     bar$
   );
}

Answer 1

Since you want to use the result of an Observable as your seed value, switchMap will help.

switchMap docs

   const bar$: Observable<State> = state$.pipe(
    switchMap((state) => {
      return input$.pipe(
        filter((input) => isBar(input)),  
        scan((curState, input) => {
          // do some logic here
          return {...curState, prop: 'new value'}
        }, state);
      )
    })

I've made a sample CodePen for a more complete solution at https://codepen.io/askmattcairns/pen/LYjEoZz?editors=0010 .

---

More Details

switchMap means to switch to the stream in here. So this code is saying, once state$ emits a value, store it (as state ), then wait for input$ to emit.

When we call scan , its seed value (the second property of scan ) is now the result of state$ 's emitted value.

This will emit a new value any time input$ receives a new value.

Update to Code Sandbox

After digging in to your Code Sandbox, I better understand what the problem is. You can see my final output at https://codesandbox.io/s/elegant-chaum-2b794?file=/src/index.tsx .

When you initialize your 2 inner streams foo$ and bar$ , they both reference state$ using withLatestFrom . Each time input$ emits, it still references the original value of state , using 0 as its starting total.