反应 useReducer 异步数据获取

问题描述

我正在尝试使用新的 react useReducer API 获取一些数据，但卡在需要异步获取的阶段.我只是不知道如何:/

如何将数据获取放在 switch 语句中，或者这不是应该如何完成的方式?

从 'react' 导入 Reactconst ProfileContext = React.createContext()常量初始状态 = {数据:假}let reducer = async (state, action) =>{开关(动作.类型){案例卸载":返回初始状态案例重新加载":return { data: reloadProfile() }//怎么做???}}const reloadProfile = async() =>{尝试 {让 profileData = await fetch('/profile')profileData = 等待 profileData.json()返回个人资料数据} 捕捉(错误){控制台日志(错误)}}函数 ProfileContextProvider(props) {让 [profile, profileR] = React.useReducer(reducer, initialState)返回 (<ProfileContext.Provider value={{ profile, profileR }}>{props.children}</ProfileContext.Provider>)}导出 { ProfileContext, ProfileContextProvider }

我试图这样做，但它不适用于 async ;(

let reducer = async (state, action) =>{开关(动作.类型){案例卸载":返回初始状态案例重新加载":{返回等待{数据:2}}}}

解决方案

保持 reducers 纯净.它将使 useReducer 更具可预测性并简化可测试性.后续方法都将异步操作与纯 reducer 结合起来:

1.dispatch前取数据(简单)

用 asyncDispatch 包裹原始的 dispatch 并让上下文传递这个函数:

const AppContextProvider = ({ children }) =>{const [状态，调度] = useReducer(reducer, initState);const asyncDispatch = () =>{//根据您的需要调整参数调度({类型:加载"})；fetchData().then(data => {dispatch({ type: finished", payload: data });});};返回 (<AppContext.Provider value={{ state, dispatch: asyncDispatch }}>{孩子们}</AppContext.Provider>);//注意:记住上下文值，如果 Provider 被更频繁地重新渲染};

const reducer = (state, { type, payload }) =>{if (type === "loading") return { status: "loading" };if (type === "finished") return { status: "finished", data: payload };返回状态；};const initState = {状态:空闲"};const AppContext = React.createContext();const AppContextProvider = ({ children }) =>{const [state, dispatch] = React.useReducer(reducer, initState);const asyncDispatch = () =>{//根据您的需要调整参数dispatch({ type: "loading" });fetchData().then(data => {dispatch({ type: "finished", payload: data });});};返回 (<AppContext.Provider value={{ state, dispatch: asyncDispatch }}>{孩子们}</AppContext.Provider>);};功能应用(){返回 (<AppContextProvider><孩子/></AppContextProvider>);}const Child = () =>{const val = React.useContext(AppContext);常量{状态:{状态，数据}，派遣} = val;返回 (<div><p>状态:{状态}</p><p>数据:{数据||"-"}
<button onClick={dispatch}>获取数据</button>

);};函数 fetchData() {返回新的承诺(解决 => {setTimeout(() => {解决(42)；}, 2000);});}ReactDOM.render(, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4="crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w="crossorigin="匿名"></script><div id="root"></div>