react reducer中如何异步更新数据？

Question

export enum actionType {
    updateData = 'updateData',
}

export const initData = {
    data: {}
}

const update = () => {
    const age = 'xxx'
    let name = 'xxxx'
    // 这里模拟异步请求
    setTimeout(() => {
        name = '异步数据'
    }, 2000)
    return {
        age,
        name,
    }
}
export const passengerReducer = (state, action) => {
    const data = update()
    switch (action.type) {
        case actionType.updateData:
            return {
                ...state,
                data,
            }
        default:
            return state
    }
}

// 外部调用

dispatch({
     type: updateData
})

之前name的更新是同步更新的没有问题现在需要走接口，等接口返回后再更新，我试过在这个文件中调用dispath但是调用报错，请问下这种异步的数据该怎么更新

Answer 1

const MyComponent = () => {
    const [state, dispatch] = useReducer(passengerReducer, initData);

    useEffect(() => {
        const fetchData = async () => {
            const name = await fetchName(); 
            dispatch({ type: actionType.updateData, payload: { name } });
        };

        fetchData();
    }, []); 

    // 组件其他部分
};

Answer 2

你可以自己封装一个asyncDispatch

const AppContext = createContext();
const AppContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, {initState});
  const asyncDispatch = () => {
    dispatch({ type: "loading" });
    fetchData().then(data => {
      dispatch({ type: "finished", payload: data });
    });
  };

  return (
    <AppContext.Provider value={{ state, dispatch: asyncDispatch }}>
      {children}
    </AppContext.Provider>
  );
};

const useAsyncDispatch = () => {
    const context = useContext(AppContext);
    if (context === undefined) {
      throw new Error("useAsyncDispatch must be used within a AppContextProvider");
    }
    const { dispatch } = context;
    return dispatch;
};