感谢 repo, 三个问题

[HaveF]

1. 关于 reaction$
   reaction$ 感觉和 tostream , 再配合个 from 功能差不多
   是不是可以直接用这个官方的维护性更好?

2. 关于 action 的一些疑问

import { types, effect, action } from 'mst-effect'
import { map, switchMap } from 'rxjs/operators'

const Model = types
  .model({
    value: types.string,
  })
  .actions((self) => ({
    fetch: effect<string>(self, (payload$) => {
      function setValue(value: string) {
        self.value = value
      }

      return payload$.pipe(
        switchMap((url) => fetch$(url)),
        map((value) => action(setValue, value)),
      )
    }),
  }))

其中

      function setValue(value: string) {
        self.value = value
      }

这一部分可以写在和 fetch 同级的地方吗? 这样好像方便 compose 一些?

3. 老实讲, 整个库还是让我有点困惑

https://egghead.io/lessons/react-defining-asynchronous-processes-using-flow
2分51秒的地方

在 getSuggestion 的地方直接使用 rxjs, 在 subscribe 调用下 mst 的 actions 不就可以了? 为何如此大动周折?

[runjuu]

1. 关于 reaction$

没错，在大部分情况下是可以进行互换的。reaction$ 在实际代码中只是对 reaction 的一个简单封装。

它们的区别只有两个：一个是最终“流”出来的值，reaction$ 多加了一层封装，而 toStream 则是直接返回了对应的值；另一个是 reaction$ 会多一些 options, 而 toStream 只有 fireImmediately。

mst-effect 提供 reaction$ 的本意是填补这方面的空白。如果项目中已经用到 mobx-utils 了的话，直接用 toStream 也没什么问题的，而且 reaction 额外支持的一些 options 其实在 RxJS 里面也非常容易实现。

2. 关于 action 的一些疑问

是指能写成这样吗？

...
 .actions((self) => ({
    setValue(value: string) {
      self.value = value
    },
    fetch: effect<string>(self, (payload$) => {
      return payload$.pipe(
        switchMap((url) => fetch$(url)),
        map((value) => action(self.setValue, value)),
      )
    }),
  }))
...

理论上是没问题的，但如果是用 TS 写的话，类型系统会抱怨说没有 self.setValue。需要改成这样：

...
 .actions((self) => ({
    setValue(value: string) {
      self.value = value
    },
  }))
 .actions((self) => ({
    fetch: effect<string>(self, (payload$) => {
      return payload$.pipe(
        switchMap((url) => fetch$(url)),
        map((value) => action(self.setValue, value)),
      )
    }),
  }))
...

或者这样：

...
 .actions((self) => {
    function setValue(value: string) {
      self.value = value
    }
    
    return {
      setValue,
      
      fetch: effect<string>(self, (payload$) => {
        return payload$.pipe(
          switchMap((url) => fetch$(url)),
          map((value) => action(setValue, value)),
        )
      }),
    }
  })
...

当需要在外部调用 setValue 时，这两种写法都没什么问题；但如果是只在某个 effect 里使用到的 action，还是非常建议用闭包的写法将它隐藏起来。

3. 老实讲, 整个库还是让我有点困惑

直接使用 rxjs 当然是可以的，但就需要手动地去处理 subscribe 和 unsubscribe 了。而且也不能「在 getSuggestion 的地方直接使用 rxjs」，而是需要额外的变量去保存 Observable 和对应的 subscription；类似这样：

...
.actions((self) => {
  const getSuggestionsSource = new Subject();
  const subscription = getSuggestionsSource
    .pipe(
      // do some fetch.
    )
    .subscribe();

  return {
    beforeDestroy() {
      subscription.unsubscribe();
    },
    getSuggestions() {
      getSuggestionsSource.next();
    },
  }
})
...

而这还只是一个使用了 RxJS 的地方，如果有好几个 action 都这样写的话，临时变量就更多了。

[HaveF]

感谢这么详细的解答, 尤其是第三个, 我终于明白这个库的作用了 - -;
如果是不需要 unsubscribe 的, 那可以像我说的写了
如果是需要unsubscribe 的, 那么就需要 beforeDestroy 中进行操作了

import { fromPromise } from 'rxjs';

...
 .actions((self) => ({
    setValue(value: string) {
      self.value = value
    },
  }))
.actions((self) => ({
  fetch (){
    const getSuggestions$ = fromPromise(
       fetch('http://myserver.com/')
       .then(response => response.json()) 
    )
    getSuggestions$.subscribe(data=>self.setValue(data.value))
  }
}))
...

[idfunctor]

I used Google Translate to read through this and yes, before I adopted MST to be able to use MST-effect, I was composing objects for different functionalities together with a makeAutoObservable (to have an arch similar to MST).
The only way I was able to use Rx effectively was to create new Subject() and imperatively manage subscriptions. That was something "hacky" and not "first-class" like redux-observable is, and without this library, it would be very difficult for me to convince my team to use Rx + MobX. The implicit subscription management is a big win for me!