反应 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 }

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

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

Answer 1

这是useReducer示例没有涉及的一个有趣案例。 我不认为减速器是异步加载的正确位置。 出于 Redux 的心态，您通常会在其他地方加载数据，无论是在 thunk、observable（例如 redux-observable）中，还是在像componentDidMount这样的生命周期事件中。 随着新useReducer我们可以使用componentDidMount使用方法useEffect 。 您的效果可能如下所示：

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 或 state 传递给reloadProfile函数，您可以通过调整useEffect的第二个参数（示例中的空数组）来实现，以便它仅在需要时运行。 您需要检查先前的值或实施某种缓存以避免在不必要时进行提取。

更新 - 从孩子重新加载

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

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>
  );
}

如果你真的想使用 dispatch 函数而不是显式回调，你可以通过将 dispatch 包装在一个高阶函数中来实现，该函数处理在 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>
  );
}

Answer 2

我写了一个非常详细的问题解释和可能的解决方案。 Dan Abramov 建议了解决方案 3。

注意：要点中的示例提供了文件操作示例，但可以为数据获取实现相同的方法。

https://gist.github.com/astoilkov/013c513e33fe95fa8846348038d8fe42

Answer 3

保持 reducers 纯净是一个很好的做法。 它将使useReducer更具可预测性并简化可测试性。 后续方法都将异步操作与纯减速器相结合：

1. dispatch前取数据（简单）

用asyncDispatch包装原始dispatch并让上下文传递这个函数：

const AppContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initState);
  const asyncDispatch = () => { // adjust args to your needs
    dispatch({ type: "loading" });
    fetchData().then(data => {
      dispatch({ type: "finished", payload: data });
    });
  };
  
  return (
    <AppContext.Provider value={{ state, dispatch: asyncDispatch }}>
      {children}
    </AppContext.Provider>
  );
  // Note: memoize the context value, if Provider gets re-rendered more often
};

 const reducer = (state, { type, payload }) => { if (type === "loading") return { status: "loading" }; if (type === "finished") return { status: "finished", data: payload }; return state; }; const initState = { status: "idle" }; const AppContext = React.createContext(); const AppContextProvider = ({ children }) => { const [state, dispatch] = React.useReducer(reducer, initState); const asyncDispatch = () => { // adjust args to your needs dispatch({ type: "loading" }); fetchData().then(data => { dispatch({ type: "finished", payload: data }); }); }; return ( <AppContext.Provider value={{ state, dispatch: asyncDispatch }}> {children} </AppContext.Provider> ); }; function App() { return ( <AppContextProvider> <Child /> </AppContextProvider> ); } const Child = () => { const val = React.useContext(AppContext); const { state: { status, data }, dispatch } = val; return ( <div> <p>Status: {status}</p> <p>Data: {data || "-"}</p> <button onClick={dispatch}>Fetch data</button> </div> ); }; function fetchData() { return new Promise(resolve => { setTimeout(() => { resolve(42); }, 2000); }); } ReactDOM.render(<App />, 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="anonymous"></script> <div id="root"></div>

2.使用中间件进行dispatch （通用）

可以使用redux-thunk 、 redux-observable 、 redux-saga等中间件增强dispatch ，以获得更大的灵活性和可重用性。 或者自己写一个。

比方说，我们想要 1.) 使用redux-thunk获取异步数据 2.) 做一些日志记录 3.) 使用最终结果调用dispatch 。 首先定义中间件：

import thunk from "redux-thunk";
const middlewares = [thunk, logger]; // logger is our own implementation

然后编写一个自定义的useMiddlewareReducer Hook，你可以在这里看到useReducer捆绑了额外的中间件，类似于 Redux applyMiddleware ：

const [state, dispatch] = useMiddlewareReducer(middlewares, reducer, initState);

中间件作为第一个参数传递，否则 API 与useReducer相同。 对于实现，我们采用applyMiddleware 源代码并将其转移到 React Hooks。

 const middlewares = [ReduxThunk, logger]; const reducer = (state, { type, payload }) => { if (type === "loading") return { ...state, status: "loading" }; if (type === "finished") return { status: "finished", data: payload }; return state; }; const initState = { status: "idle" }; const AppContext = React.createContext(); const AppContextProvider = ({ children }) => { const [state, dispatch] = useMiddlewareReducer( middlewares, reducer, initState ); return ( <AppContext.Provider value={{ state, dispatch }}> {children} </AppContext.Provider> ); }; function App() { return ( <AppContextProvider> <Child /> </AppContextProvider> ); } const Child = () => { const val = React.useContext(AppContext); const { state: { status, data }, dispatch } = val; return ( <div> <p>Status: {status}</p> <p>Data: {data || "-"}</p> <button onClick={() => dispatch(fetchData())}>Fetch data</button> </div> ); }; function fetchData() { return (dispatch, getState) => { dispatch({ type: "loading" }); setTimeout(() => { // fake async loading dispatch({ type: "finished", payload: (getState().data || 0) + 42 }); }, 2000); }; } function logger({ getState }) { return next => action => { console.log("state:", JSON.stringify(getState()), "action:", JSON.stringify(action)); return next(action); }; } // same API as useReducer, with middlewares as first argument function useMiddlewareReducer( middlewares, reducer, initState, initializer = s => s ) { const [state, setState] = React.useState(initializer(initState)); const stateRef = React.useRef(state); // stores most recent state const dispatch = React.useMemo( () => enhanceDispatch({ getState: () => stateRef.current, // access most recent state stateDispatch: action => { stateRef.current = reducer(stateRef.current, action); // makes getState() possible setState(stateRef.current); // trigger re-render return action; } })(...middlewares), [middlewares, reducer] ); return [state, dispatch]; } // | dispatch fn | // A middleware has type (dispatch, getState) => nextMw => action => action function enhanceDispatch({ getState, stateDispatch }) { return (...middlewares) => { let dispatch; const middlewareAPI = { getState, dispatch: action => dispatch(action) }; dispatch = middlewares .map(m => m(middlewareAPI)) .reduceRight((next, mw) => mw(next), stateDispatch); return dispatch; }; } ReactDOM.render(<App />, 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="anonymous"></script> <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.3.0/redux-thunk.min.js" integrity="sha256-2xw5MpPcdu82/nmW2XQ6Ise9hKxziLWV2GupkS9knuw=" crossorigin="anonymous"></script> <script>var ReduxThunk = window.ReduxThunk.default</script>

注意：我们将中间状态存储在可变引用中- stateRef.current = reducer(...) ，因此每个中间件都可以在使用getState调用时访问当前的、最近的状态。

有确切的API为useReducer ，您可以动态创建挂钩：

const useMiddlewareReducer = createUseMiddlewareReducer(middlewares); //init Hook
const MyComp = () => { // later on in several components
  // ...
  const [state, dispatch] = useMiddlewareReducer(reducer, initState);
}

 const middlewares = [ReduxThunk, logger]; const reducer = (state, { type, payload }) => { if (type === "loading") return { ...state, status: "loading" }; if (type === "finished") return { status: "finished", data: payload }; return state; }; const initState = { status: "idle" }; const AppContext = React.createContext(); const useMiddlewareReducer = createUseMiddlewareReducer(middlewares); const AppContextProvider = ({ children }) => { const [state, dispatch] = useMiddlewareReducer( reducer, initState ); return ( <AppContext.Provider value={{ state, dispatch }}> {children} </AppContext.Provider> ); }; function App() { return ( <AppContextProvider> <Child /> </AppContextProvider> ); } const Child = () => { const val = React.useContext(AppContext); const { state: { status, data }, dispatch } = val; return ( <div> <p>Status: {status}</p> <p>Data: {data || "-"}</p> <button onClick={() => dispatch(fetchData())}>Fetch data</button> </div> ); }; function fetchData() { return (dispatch, getState) => { dispatch({ type: "loading" }); setTimeout(() => { // fake async loading dispatch({ type: "finished", payload: (getState().data || 0) + 42 }); }, 2000); }; } function logger({ getState }) { return next => action => { console.log("state:", JSON.stringify(getState()), "action:", JSON.stringify(action)); return next(action); }; } function createUseMiddlewareReducer(middlewares) { return (reducer, initState, initializer = s => s) => { const [state, setState] = React.useState(initializer(initState)); const stateRef = React.useRef(state); // stores most recent state const dispatch = React.useMemo( () => enhanceDispatch({ getState: () => stateRef.current, // access most recent state stateDispatch: action => { stateRef.current = reducer(stateRef.current, action); // makes getState() possible setState(stateRef.current); // trigger re-render return action; } })(...middlewares), [middlewares, reducer] ); return [state, dispatch]; } } // | dispatch fn | // A middleware has type (dispatch, getState) => nextMw => action => action function enhanceDispatch({ getState, stateDispatch }) { return (...middlewares) => { let dispatch; const middlewareAPI = { getState, dispatch: action => dispatch(action) }; dispatch = middlewares .map(m => m(middlewareAPI)) .reduceRight((next, mw) => mw(next), stateDispatch); return dispatch; }; } ReactDOM.render(<App />, 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="anonymous"></script> <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.3.0/redux-thunk.min.js" integrity="sha256-2xw5MpPcdu82/nmW2XQ6Ise9hKxziLWV2GupkS9knuw=" crossorigin="anonymous"></script> <script>var ReduxThunk = window.ReduxThunk.default</script>

更多信息 - 外部库： react-use , react-hooks-global-state , react-enhanced-reducer-hook

Answer 4

我用一层包裹了dispatch方法来解决异步action的问题。

这里是初始状态。 loading键记录了应用当前的加载状态，方便应用在服务器端获取数据时显示加载页面。

{
  value: 0,
  loading: false
}

有四种动作。

function reducer(state, action) {
  switch (action.type) {
    case "click_async":
    case "click_sync":
      return { ...state, value: action.payload };
    case "loading_start":
      return { ...state, loading: true };
    case "loading_end":
      return { ...state, loading: false };
    default:
      throw new Error();
  }
}

function isPromise(obj) {
  return (
    !!obj &&
    (typeof obj === "object" || typeof obj === "function") &&
    typeof obj.then === "function"
  );
}

function wrapperDispatch(dispatch) {
  return function(action) {
    if (isPromise(action.payload)) {
      dispatch({ type: "loading_start" });
      action.payload.then(v => {
        dispatch({ type: action.type, payload: v });
        dispatch({ type: "loading_end" });
      });
    } else {
      dispatch(action);
    }
  };
}

假设有一个异步方法

async function asyncFetch(p) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(p);
    }, 1000);
  });
}

wrapperDispatch(dispatch)({
  type: "click_async",
  payload: asyncFetch(new Date().getTime())
});

完整的示例代码在这里：

https://codesandbox.io/s/13qnv8ml7q

Answer 5

更新：

我在下面的网络链接中添加了另一条评论。 这是一个名为useAsyncReducer的自定义钩子，基于下面的代码，它使用与普通useReducer完全相同的签名。

function useAsyncReducer(reducer, initState) {
    const [state, setState] = useState(initState),
        dispatchState = async (action) => setState(await reducer(state, action));
    return [state, dispatchState];
}

async function reducer(state, action) {
    switch (action.type) {
        case 'switch1':
            // Do async code here
            return 'newState';
    }
}

function App() {
    const [state, dispatchState] = useAsyncReducer(reducer, 'initState');
    return <ExampleComponent dispatchState={dispatchState} />;
}

function ExampleComponent({ dispatchState }) {
    return <button onClick={() => dispatchState({ type: 'switch1' })}>button</button>;
}

旧解决方案：

我刚刚在此处发布了此回复，并认为也可以在此处发布以帮助任何人。

我的解决方案是使用useState + 一个异步函数来模拟useReducer ：

async function updateFunction(action) {
    switch (action.type) {
        case 'switch1':
            // Do async code here (access current state with 'action.state')
            action.setState('newState');
            break;
    }
}

function App() {
    const [state, setState] = useState(),
        callUpdateFunction = (vars) => updateFunction({ ...vars, state, setState });

    return <ExampleComponent callUpdateFunction={callUpdateFunction} />;
}

function ExampleComponent({ callUpdateFunction }) {
    return <button onClick={() => callUpdateFunction({ type: 'switch1' })} />
}

Answer 6

您可以使用useAsync包： https : //github.com/sonofjavascript/use-async ，它基本上是useReducer钩子的扩展，它允许通过 http 请求管理应用程序状态上的异步操作。

通过ClientStore设置客户端代理（您可以使用自己的 http 客户端）：

import React from 'react'

import { ClientStore } from '@sonofjs/use-async'
import axios from 'axios'

import Component from './Component.jsx'

const ViewContainer = () => (
  <ClientStore.Provider agent={axios}>
    <Component />
  </ClientStore.Provider>
)

export default ViewContainer

定义并使用您的操作：

import React, { useEffect }  from 'react'
import useAsync from '@sonofjs/use-async'

const actions = {
  FETCH_DATA: (state) => ({
    ...state,
    loading: true,
    request: {
      method: 'GET',
      url: '/api/data'
    }
  }),
  FETCH_DATA_SUCCESS: (state, response) => ({
    ...state,
    loading: false,
    data: response
  }),
  FETCH_DATA_ERROR: (state, error) => ({
    ...state,
    loading: false,
    error
  })
}

const initialState = {
  loading: false,
  data: {}
}

const Component = () => {
  const [state, dispatch] = useAsync(actions, initialState)

  useEffect(() => {
    dispatch({ type: 'DATA' })
  }, [])

  return (
    <>
      {state.loading ? <span>Loading...</span> : null}
      {<span>{JSON.stringify(state.data)}</span>}
      {state.error ? <span>Error: {JSON.stringify(state.error)}</span> : null}
    <>
  )
}

export default Component

Answer 7

非常简单，您可以在异步函数结果后更改 useEffect 中的状态

为获取结果定义useState

const [resultFetch, setResultFetch] = useState(null);

和useEffect用于监听setResultFetch

获取异步 API 调用setResultFetch(result of response)

useEffect(() => {
if (resultFetch) {
  const user = resultFetch;
  dispatch({ type: AC_USER_LOGIN, userId: user.ID})

}}, [resultFetch])