Существует ли альтернатива redux-saga для решения по управлению состоянием реагирующих хуков? - PullRequest
Новая
       25

Существует ли альтернатива redux-saga для решения по управлению состоянием реагирующих хуков?

0 голосов
/ 08 января 2020

Используя перехватчики React 16, я могу избавиться от избыточности, но при этом иметь функцию управления состоянием, см.: https://kentcdodds.com/blog/application-state-management-with-react

Однако я использовал избыточность- Сага, чтобы слушатель (или обработчик) делал что-то асинхронное c после того, как редуктор обработал действие. Вопрос в том, что я не уверен, как этого добиться, если не полагаться на Redx, Sasex.

Другими словами, если посмотреть на приведенный здесь пример: https://codesandbox.io/s/4qzj73lozx?fontsize=14&hidenavigation=1&module=%2Fsrc%2F05-context-with-reducer.js

Как прослушать действие «увеличить», сделать что-то асинхронное c, когда это происходит (без использования redux-саги).

1 Ответ

0 голосов
/ 08 января 2020

Я использую redux & redux-saga для асинхронных операций c, что очень удобно с точки зрения читабельности, отладки и модульности моего кода. Однако, если вы хотите использовать ловушки, чтобы справиться с этим, вы также можете создать собственный крючок: 

import React, { useState, useEffect } from 'react';

function useAsyncHook() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const res = await fetch(
          `ENDPOINT`
        );

        const data = await res.json();
        setData(data);
      } catch (error) {
        setLoading(false);
      }
    }
  }, []);

  return [data, loading];
}

Тогда вы можете использовать его так: 

function App() {
  const [data, loading] = useAsyncHook();
  return (
    <div>
      {!loading && <p>Loading...</p>}
      {data && data.map(item => {
          return <div>{item}</div>;
        })
      )}
    </div>
  );
}
...