RxJS可观测共享startWith（）状态在merge（）中

如何在3个流之间共享

startWith（false）

状态？我尝试使用

with latestfrom（）

但该值出现了一些奇怪的错误

const Home=componentFromStream（prop$=>{
const{handler:toggleHandler，stream:toggle$}=createEventHandler（）；
const{handler:showHandler，stream:show$}=createEventHandler（）；
const{handler:hideHandler，stream:hide$}=createEventHandler（）；
const modal$=合并(
切换$.pipe(
startWith（假），
映射（（）=>prev=>！prev），
扫描（（状态，更改状态：任意）=>changeState（状态））
),
显示$.pipe(
startWith（假），
映射（（）=>prev=>true），
扫描（（状态，更改状态：任意）=>changeState（状态））
),
隐藏$管道(
startWith（假），
映射（（）=>prev=>false），
扫描（（状态，更改状态：任意）=>changeState（状态））
)
);
返回组合测试（prop$，modal$）.pipe(
地图（（[道具，模态]）=>{
控制台日志（模态）；
返回(
切换
显示
隐藏
{modal？'Visible'：'Hidden'}
);
})
);
});

在本例中，

切换

不考虑

显示

或

隐藏

的当前值，而只考虑其自身的最新值

---

首先在所有这些可观测对象上使用

startWith

，这意味着它们在开始时都会发出假信号。就像你一次按下了所有的按钮

我认为你应该尝试做出不同的行为。使用

startWith

可以设置

modal

属性的初始状态，对吗？因此，它应该在合并这些流之后出现

要切换该值，需要两件事：

存储状态的位置（通常是

扫描的累加器

）

区分那些按键。您有三个按钮，因此需要三个值

这是我的方法：

 const modal$ = merge(
    show$.pipe(mapTo(true)),
    hide$.pipe(mapTo(false)),
    toggle$.pipe(mapTo(null))
  ).pipe(
    startWith(false),
    scan((acc, curr) => {
      if (curr === null) {
        return !acc;
      } else {
        return curr;
      }
    })
  );

“显示”按钮始终发出

true

，“隐藏”按钮发出

false

，切换按钮发出

null

。我将它们合并在一起，我们想从

false

开始。接下来是将状态保存在累加器中的

scan

---

当

null

出现时，它返回否定状态。当

true

或

false

出现时，它会返回它-这样它会设置新的状态，而不考虑以前的值。

首先在所有这些可观察对象上设置

startWith

，意味着它们都会在开始时发出false。就像你一次按下了所有的按钮

我认为你应该尝试做出不同的行为。使用

startWith

可以设置

modal

属性的初始状态，对吗？因此，它应该在合并这些流之后出现

要切换该值，需要两件事：

存储状态的位置（通常是

扫描的累加器

）

区分那些按键。您有三个按钮，因此需要三个值

这是我的方法：

 const modal$ = merge(
    show$.pipe(mapTo(true)),
    hide$.pipe(mapTo(false)),
    toggle$.pipe(mapTo(null))
  ).pipe(
    startWith(false),
    scan((acc, curr) => {
      if (curr === null) {
        return !acc;
      } else {
        return curr;
      }
    })
  );

“显示”按钮始终发出

true

，“隐藏”按钮发出

false

，切换按钮发出

null

。我将它们合并在一起，我们想从

false

开始。接下来是将状态保存在累加器中的

scan

---

当

null

出现时，它返回否定状态。当

true

或

false

出现时，它会返回它-这样它会设置新的状态，而不考虑以前的值。

为了做到这一点，您需要以稍微不同的方式管理状态，类似于人们在redux中所做的事情。请看一个例子：

const{of，merge，fromEvent}=rxjs；//=要求（“rxjs”）
const{map，scan}=rxjs.operators；//=要求（“rxjs/操作员”）
const toggle$=fromEvent（document.getElementById（'toggle'），'click'）；
const show$=fromEvent（document.getElementById（'show'），'click'）；
const hide$=fromEvent（document.getElementById（'hide'），'click'）；
const reduce=（状态，更改）=>更改（状态）；
const initialState=false；
const state$=合并(
of（e=>e），
切换$.pipe（映射（e=>state=>！state）），
显示$.pipe（映射（e=>state=>true）），
隐藏$.pipe（映射（e=>state=>false）），
).烟斗(
扫描（减少，初始状态），
);
state$.subscribe（e=>console.log（'state:'，e））

切换
显示
Hide
为了做到这一点，您需要以稍微不同的方式管理状态，类似于人们在redux中所做的事情。请看一个例子：


const{of，merge，fromEvent}=rxjs；//=要求（“rxjs”）
const{map，scan}=rxjs.operators；//=要求（“rxjs/操作员”）
const toggle$=fromEvent（document.getElementById（'toggle'），'click'）；
const show$=fromEvent（document.getElementById（'show'），'click'）；
const hide$=fromEvent（document.getElementById（'hide'），'click'）；
const reduce=（状态，更改）=>更改（状态）；
const initialState=false；
const state$=合并(
of（e=>e），
切换$.pipe（映射（e=>state=>！state）），
显示$.pipe（映射（e=>state=>true）），
隐藏$.pipe（映射（e=>state=>false）），
).烟斗(
扫描（减少，初始状态），
);
state$.subscribe（e=>console.log（'state:'，e））

切换
显示
隐藏
我采取了每个人的方法&想出了这个。它将toggle（）逻辑保留在map函数中，并使用startWith（）设置值

const modal$=merge(
切换$.pipe(
映射（（）=>prev=>！prev），
),
显示$.pipe(
映射（（）=>prev=>true），
),
隐藏$管道(
映射（（）=>prev=>false），
)
).烟斗(
startWith（假），
扫描（（状态，更改）=>更改（状态）），
);
我采取了每个人的方法并想出了这个。它将toggle（）逻辑保留在map函数中，并使用startWith（）设置值

const modal$=merge(
切换$.pipe(
映射（（）=>prev=>！prev），
),
显示$.pipe(
地图（（）=>prev