如果您有要迁移到新的React Context API +钩子（useReducer）的Redux应用程序，您将如何替换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 +钩子呢？
看一下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 +钩子替换应用程序中的redux可能会很好。但是，如果您需要所有出色的工具，中间件，devtools等，则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
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句