[React x GraphQL x Rx.js] 入力された値を購読して1.5秒後にdispatchする検索機能

gistfile1.md

[React x GraphQL x Rx.js] 入力された値を購読して1.5秒後にdispatchする検索機能

import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
.
.
.

const onSearch$ = new Subject().pip(debounceTime(1500))

const HOGE = () => {
  const [state, dispatch] = useReducer(initialState, dispatch);
  const refChildText = useRef(null);
  useEffect(() => {
    const onSearch = onSearch$.subscribe(( value )=> {
     dispatch({value})
    })
    return () => (onSearch.subscription) onSearch.unsubscribe() 
  }, []);

  const onChangeFilterUsersName = useCallback(() => {
    if (refChildText.current) {
      onSearch$.next(refChildText.current.value);
    }
  }, [refChildText.current]);

  ////
  <Query query={HOGEHOGE} variables={value} >
      <Comp.Provider
        value={{
        onClickPrev,
        onClickNext,
        onChangeFilterUsersName, //pass
        refChildText //pass
}


///////

export const MessagedList = () => {
  const {
    me,
    pageInfo,
    threads,
    totalCount,
    refChildText,
    messagesPerPage,
    onChangeFilterUsersName
  } = useContext(Comp);
return (
    <p><input type='text' placeholder='ユーザー名で絞り込み' ref={refChildText} onChange={onChangeFilterUsersName} /></p>
)