合并 map rxjs 中 pluck 和 combineLatest 的值答案

【问题标题】：merge values from pluck and combineLatest inside map rxjs合并 map rxjs 中 pluck 和 combineLatest 的值
【发布时间】：2019-05-12 04:22:34
【问题描述】：

我有一个 addHandler 的道具从 App.js 传递给 AddTodo 组件。然后在 AddTodo 处理程序中，我不确定如何将 pluck 和 map 结合起来，以便我从 pluck 和 combineLatest 中获得价值，并在 map 中合并

这是我的代码

App.js

import React from 'react';
import { componentFromStream , createEventHandler } from "recompose";
import { combineLatest } from "rxjs";
import { map, tap } from "rxjs/operators";
import AddTodo from './AddTodo/AddTodo';

import Todos from './Todos/todos';
// import User from './User/User';

const App = componentFromStream(prop$ => {
    const { handler: onAddHandler, stream: clickStream } = createEventHandler();
    const value$ = clickStream.pipe( tap(input =>
        console.warn(input)
        ));

    return combineLatest(prop$, value$).pipe(map(([props, value]) => <div>
          <AddTodo onAddHandler={onAddHandler}  />
          {/* <input placeholder="Add TODO" onChange={handler} /> */}
          <Todos todo={value} />
        </div>));
});


export default App;

AddTodo.js

import React from "react";
import { combineLatest } from "rxjs";
import { componentFromStream, createEventHandler } from "recompose";
import { pluck, map, startWith, tap } from "rxjs/operators";

const AddTodo = componentFromStream(prop$ => {
  const {
    handler: onChangeHandler,
    stream: inputStream
  } = createEventHandler();
  const value$ = inputStream.pipe(
    map(e => e.target.value),
    startWith("")
  );

  return combineLatest(prop$, value$).pipe(
    map(([props, value]) => (
      <div>
        <input
          type="text"
          placeholder="Add Todo..."
          onChange={onChangeHandler}
        />
        <button onClick={() => {}}>Add todo</button>
        {/* <button onClick={() => onAddHandler(value)}>Add todo</button> */}
      </div>
    ))
  );
});

export default AddTodo;

inside AddTodo.js inside map 我可能正在寻找类似的东西

  return combineLatest(prop$, value$).pipe(
    pluck('onAddHandler'),
    // and use this value plus the belo values inside map
    map(([props, value]) => (

【问题讨论】：

pluck 用于从对象中选择单个属性，但我不确定这是您想要使用它的方式。你能在 stackblitz 上做一个演示，展示你期望的输入和输出吗？
是的。你说的对。所以我假设onAddHandler 是从道具中提取的。我只是在构建一个 TODO 应用程序。特别坚持传递一个道具（在这种情况下为addHandler）。
如果您确实需要链接 - 这是回购 - github.com/kushalmahajan/ReactTsRxTodoApp.git

标签： rxjs rxjs6

【解决方案1】：

您需要做的就是将pluck 移动到看起来像这样的combineLatest 中，然后您应该在地图运算符中获取 onAddHandler：

return combineLatest(prop$.pipe(pluck('onAddHandler')), value$).pipe(
  map(([onAddHandler, value]) => (
    <div>
      <input
        type="text"
        placeholder="Add Todo..."
        onChange={onChangeHandler}
      />
      <button onClick={() => {}}>Add todo</button>
      {/* <button onClick={() => onAddHandler(value)}>Add todo</button> */}
    </div>
  ))
);

【讨论】：