-
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 一些?
https://egghead.io/lessons/react-defining-asynchronous-processes-using-flow |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
1. 关于 reaction$没错,在大部分情况下是可以进行互换的。 它们的区别只有两个:一个是最终“流”出来的值,
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 写的话,类型系统会抱怨说没有 ...
.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)),
)
}),
}
})
... 当需要在外部调用 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 都这样写的话,临时变量就更多了。 |
Beta Was this translation helpful? Give feedback.
1. 关于 reaction$
没错,在大部分情况下是可以进行互换的。
reaction$
在实际代码中只是对reaction
的一个简单封装。它们的区别只有两个:一个是最终“流”出来的值,
reaction$
多加了一层封装,而toStream
则是直接返回了对应的值;另一个是reaction$
会多一些 options, 而toStream
只有fireImmediately
。mst-effect
提供reaction$
的本意是填补这方面的空白。如果项目中已经用到mobx-utils
了的话,直接用toStream
也没什么问题的,而且reaction
额外支持的一些 options 其实在 RxJS 里面也非常容易实现。2. 关于 action 的一些疑问
是指能写成这样吗?
理论上是没问题的,但如果是用 TS 写的话,类型系统会抱怨说没有
self.setValue
。需要改成这样: