从 Redux 迁移到 React Context API + hooks 时如何处理副作用

Question

如果你有一个 Redux 应用程序，你想迁移到新的 React Context API + hooks (useReducer)，你将如何替换 redux-saga 或 redux-thunk 来处理副作用？我们以 redux-saga 的 github 页面为例：

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import Api from '...'

function* fetchUser(action) {
   try {
      const user = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});
   }
}

function* mySaga() {
  yield takeEvery("USER_FETCH_REQUESTED", fetchUser);
}

function* mySaga() {
  yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
}

export default mySaga;

在没有 Redux 的情况下执行等效操作，而是使用 React Context api + hooks 的推荐最佳实践是什么？

Answer 1

看看useEffect钩子。这就是你用来治疗副作用的方法。

https://reactjs.org/docs/hooks-effect.html

以下是如何从组件调用 api 并呈现数据的示例：

import ReactDOM from "react-dom";
import React, { useState, useEffect } from "react";
import axios from "axios";

function SearchResults() {
  const [data, setData] = useState(null);
  useEffect(() => {
    function getFetchUrl() {
      return "https://hn.algolia.com/api/v1/search?query=react";
    }
    async function fetchData() {
      console.log("asdasd");
      const result = await axios(getFetchUrl());
      setData(result.data);
    }

    fetchData();
  }, []);
  return <div>{JSON.stringify(data)}</div>;
}

ReactDOM.render(<SearchResults />, document.getElementById("root"));

我部分地从 overreacted.io 获取了这段代码，我强烈建议您阅读这篇关于useEffect钩子的精彩文章：https://overreacted.io/a-complete-guide-to-useeffect/

关于useReducer，它基本上是useState类固醇。它允许您处理更复杂的状态操作，但实际上并没有太大区别。

如果您希望状态由不同的组件共享，您可以使用useContext，但它与副作用如何工作实际上无关。

----关于redux：

我还想评论一下，例如，如果您只是使用 React Context api + hooks 来替换应用程序中的 redux，那么它可能会很好。但如果你想要所有很棒的工具、中间件、开发工具等，Redux 仍然是一个不错的选择，即使有钩子，它们也不互相排斥。

看：

https://blog.isquaredsoftware.com/2019/03/presentation-state-of-redux/ 具体为 https://blog.isquaredsoftware.com/presentations/2019-03-state-of-redux/#/10 https： //blog.isquaredsoftware.com/presentations/2019-03-state-of-redux/#/11