时间戳

首页 > 解决方案 > react hooks状态管理解决方案是否有redux-saga替代方案

reactjs - react hooks状态管理解决方案是否有redux-saga替代方案

问题描述

通过使用 React 16 hooks，我可以摆脱 redux 但仍然拥有状态管理功能，参考：https ://kentcdodds.com/blog/application-state-management-with-react

然而，我曾经使用 redux-saga 让一个监听器（或处理程序）在 reducer 处理一个动作后做一些异步的事情。问题是如果不依赖 redux、redux-saga，我不确定如何实现这一点。

换句话说，如果查看此处的示例：https ://codesandbox.io/s/4qzj73lozx?fontsize=14&hidenavigation=1&module=%2Fsrc%2F05-context-with-reducer.js

如何监听“增加”动作，在它发生时做一些异步的事情（不使用 redux-saga）。

标签： reactjsreduxreact-hooksredux-saga

解决方案

我正在使用 redux 和 redux-saga 进行异步操作，这在我的代码的可读性、调试和模块化方面非常舒适。但是，如果您想使用钩子来处理它，也可以通过创建自定义钩子来实现：

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>
  );
}

推荐阅读