reactjs - React useReducer 异步数据获取

Question

我正在尝试使用新的 React useReducer API 获取一些数据，但卡在了我需要异步获取它的阶段。我只是不知道怎么办:/

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

import React from 'react'

const ProfileContext = React.createContext()

const initialState = {
  data: false
}

let reducer = async (state, action) => {
  switch (action.type) {
    case 'unload':
      return initialState
    case 'reload':
      return { data: reloadProfile() } //how to do it???
  }
}


const reloadProfile = async () => {
  try {
    let profileData = await fetch('/profile')
    profileData = await profileData.json()

    return profileData
  } catch (error) {
    console.log(error)
  }
}

function ProfileContextProvider(props) {
  let [profile, profileR] = React.useReducer(reducer, initialState)

  return (
    <ProfileContext.Provider value={{ profile, profileR }}>
      {props.children}
    </ProfileContext.Provider>
  )
}

export { ProfileContext, ProfileContextProvider }

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

let reducer = async (state, action) => {
  switch (action.type) {
    case 'unload':
      return initialState
    case 'reload': {
      return await { data: 2 }
    }
  }
}

Answer 1

这是一个有趣的案例，useReducer 示例没有涉及。我认为 reducer 不是异步加载的正确位置。从 Redux 的思维方式来看，您通常会在其他地方加载数据，无论是在 thunk 中，还是在 observable 中(例如 redux-observable)，或者只是在诸如 componentDidMount 之类的生命周期事件中。借助新的 useReducer，我们可以通过 useEffect 使用 componentDidMount 方法。您的效果可能类似于以下内容:

function ProfileContextProvider(props) {
  let [profile, profileR] = React.useReducer(reducer, initialState);

  useEffect(() => {
    reloadProfile().then((profileData) => {
      profileR({
        type: "profileReady",
        payload: profileData
      });
    });
  }, []); // The empty array causes this effect to only run on mount

  return (
    <ProfileContext.Provider value={{ profile, profileR }}>
      {props.children}
    </ProfileContext.Provider>
  );
}

此外，这里的工作示例:https://codesandbox.io/s/r4ml2x864m .

如果您需要将 prop 或状态传递给 reloadProfile 函数，您可以通过将第二个参数调整为 useEffect (示例中的空数组)来实现)以便它仅在需要时运行。您需要检查以前的值或实现某种缓存以避免在不必要时进行提取。

更新 - 从子级重新加载

如果您希望能够从子组件重新加载，有几种方法可以实现。第一个选项是将回调传递给将触发调度的子组件。这可以通过上下文提供者或组件 Prop 来完成。由于您已经在使用上下文提供程序，因此以下是该方法的示例:

function ProfileContextProvider(props) {
  let [profile, profileR] = React.useReducer(reducer, initialState);

  const onReloadNeeded = useCallback(async () => {
    const profileData = await reloadProfile();
    profileR({
      type: "profileReady",
      payload: profileData
    });
  }, []); // The empty array causes this callback to only be created once per component instance

  useEffect(() => {
    onReloadNeeded();
  }, []); // The empty array causes this effect to only run on mount

  return (
    <ProfileContext.Provider value={{ onReloadNeeded, profile }}>
      {props.children}
    </ProfileContext.Provider>
  );
}

如果您确实想要使用调度函数而不是显式回调，则可以通过将调度包装在一个高阶函数中来实现，该函数处理本来由中间件处理的特殊操作在 Redux 世界中。这是一个例子。请注意，我们不是将 profileR 直接传递到上下文提供程序中，而是传递充当中间件的自定义提供程序，拦截 reducer 不关心的特殊操作。

function ProfileContextProvider(props) {
  let [profile, profileR] = React.useReducer(reducer, initialState);

  const customDispatch= useCallback(async (action) => {
    switch (action.type) {
      case "reload": {
        const profileData = await reloadProfile();
        profileR({
          type: "profileReady",
          payload: profileData
        });
        break;
      }
      default:
        // Not a special case, dispatch the action
        profileR(action);
    }
  }, []); // The empty array causes this callback to only be created once per component instance

  return (
    <ProfileContext.Provider value={{ profile, profileR: customDispatch }}>
      {props.children}
    </ProfileContext.Provider>
  );
}