Как использовать useReducer и rxjs с реагирующими хуками?

Question

Я хотел бы использовать useReducer из response-hooks и rxjs вместе.Например, я хотел бы получить данные из API.

Это код, который я написал для того, чтобы сделать это:

RXJS hook:

function useRx(createSink, data, defaultValue = null) {
    const [source, sinkSubscription] = useMemo(() => {
        const source = new Subject()
        const sink = createSink(source.pipe(distinctUntilChanged()));
        const sinkSubscription = sink.subscribe()
        return [source, sinkSubscription]
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    useEffect(() => {
        source.next(data)
    }, [source, data])

    useEffect(() => {
        return () => {
            sinkSubscription.unsubscribe()
        };
    }, [sinkSubscription])
}

Код редуктора:

const dataFetchReducer = (state, action) => {
    switch (action.type) {
        case 'FETCH_LOADING':
            return {
                ...state,
                loading: true
            };
        case 'FETCH_SUCCESS':
            return {
                ...state,
                loading: false,
                total: action.payload.total,
                data: action.payload.data
            };
        case 'FETCH_FAILURE':
            return {
                ...state,
                error: action.payload
            };
        case 'PAGE':
            return {
                ...state,
                page: action.page,
                rowsPerPage: action.rowsPerPage
            };
        default:
            throw new Error();
    }
};

Как я их смешиваю:

function usePaginationReducerEndpoint(callbackService) {
    const defaultPagination = {
        statuses: null,
        page: 0,
        rowsPerPage: 10,
        data: [],
        total: 0,
        error: null,
        loading: false
    }
    const [pagination, dispatch] = useReducer(dataFetchReducer, defaultPagination)
    const memoPagination = useMemo(
        () => ({
            statuses: pagination.statuses,
            page: pagination.page,
            rowsPerPage: pagination.rowsPerPage
        }),
        [pagination.statuses, pagination.page, pagination.rowsPerPage]
    );
    useRx(
        memoPagination$ =>
        memoPagination$.pipe(
                map(memoPagination => {
                    dispatch({type: "FETCH_LOADING"})
                    return memoPagination
                }),
                switchMap(memoPagination => callbackService(memoPagination.statuses, memoPagination.page, memoPagination.rowsPerPage).pipe(
                    map(dataPagination => {
                        dispatch({ type: "FETCH_SUCCESS", payload: dataPagination })
                        return dataPagination
                    }),
                    catchError(error => {
                        dispatch({ type: "FETCH_SUCCESS", payload: "error" })
                        return of(error)
                    })
                ))
            ),
            memoPagination,
        defaultPagination,
        2000
    );
    function handleRowsPerPageChange(event) {
        const newTotalPages = Math.trunc(pagination.total / event.target.value)
        const newPage = Math.min(pagination.page, newTotalPages)
        dispatch({
            type: "PAGE",
            page: newPage,
            rowsPerPage: event.target.value
        });
    }
    function handlePageChange(event, page) {
        dispatch({
            type: "PAGE",
            page: page,
            rowsPerPage: pagination.rowsPerPage
        });
    }
    return [pagination, handlePageChange, handleRowsPerPageChange]
}

Код работает, но яинтересно, если это удача или нет ...

• Это нормально, если я отправлю внутри трубы RXJS?Каков риск?
• Если нет, как я могу смешать useReducer и RXJS?
• Если это не очень хороший подход, то какой из них хороший?

Я знаю этот ресурс: https://www.robinwieruch.de/react-hooks-fetch-data/. Но я хотел бы смешать мощь перехватчиков и RXJS, чтобы использовать, например, функцию debounce с rxjs в асинхронном запросе...

Спасибо за помощь,

Answer 1

Все, что вам нужно, это промежуточное ПО , чтобы соединить useReducer и rxjs, а не создавать их самостоятельно.Использование useReducer создаст много потенциально трудного для отладки кода, а также потребуется независимый контейнерный компонент для установки useReducer для предотвращения случайного глобального рендеринга.

Поэтому я предлагаю использовать редукционные места с помощью useReducer для создания глобального состояния из компонента ииспользуйте redux-observable (промежуточное программное обеспечение на основе RxJS 6 для Redux) в качестве промежуточного программного обеспечения для соединения rxjs и redux.

если вы хорошо знаете rxjs, его будет очень просто использовать, как официальный веб-сайтпоказать, получить данные из API будет: https://redux -observable.js.org / docs / basics / Epics.html

// epic
const fetchUserEpic = action$ => action$.pipe(
  ofType(FETCH_USER),
  mergeMap(action =>
    ajax.getJSON(`https://api.github.com/users/${action.payload}`).pipe(
      map(response => fetchUserFulfilled(response))
    )
  )
);