从 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

如果您有一个想要迁移到新的 React Context API 的 Redux 应用程序，您需要能够将数据获取到层次结构中的任何组件，您需要能够将视图逻辑与您的视图逻辑分开业务逻辑，您需要能够拆分业务逻辑，这意味着模块化，意味着单个文件中没有 1000 个 LOC。

除非你别无选择，否则我会坚持使用 Redux。使用 Redux，您可以获得出色的文档，文档编写得非常好，您可以大致了解发生了什么。设计模式是众所周知的，它们有足够的支持和专门用于 Redux 的开源库。

使用 Context，您不必使用单独的库，仅此而已。这是使用 Context 代替 Redux 的唯一好处。由于在构建商店时涉及跨领域问题，上下文有其自身的挑战。

Answer 2

看看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