Redux Dispatch 保持运行

Question

  const fetchUserCognito =async()=>{
    dispatch(setCurrentCognitoUserThunk())
  }

  const fetchUserData=async()=>{
    dispatch(getUserData(user.currentUser))
  }

  const fetchTopCategories=async()=>{
    dispatch(getTopCategoryOfUser(String(user.currentUser)))
  }
  const fetchingProcess=()=>{
    fetchUserCognito()
    .then(()=>{fetchUserData()})
    .then(()=>{fetchTopCategories()})
    .finally(()=>dispatch(closeLoader({})))
  }

  useEffect(() => {
    //fetching Datas to display it
    fetchingProcess()
    orderCategories();
    dispatch(closeLoader({}))
  }, []);

你好，我正在尝试从我的 api 中获取数据，但是当我无限地尝试像这样的 redux 时运行我的调度，我检查了其他问题但没有发现我的任何问题代码

Answer 1

您可以简单地使用当前组件状态来跟踪是否应该执行效果，即

const [loading, setLoading] = useState(true);

如果加载为 true 并在执行之前将其设置为 false，则在 useEffect 中执行您的函数调用。这样您就可以完全控制效果的执行时间和方式。

用 useCallback 包装你的函数也是一个好主意，以确保它们不会在每次更新当前组件的状态时执行。不要忘记将正确的变量依赖项传递给 useCallbacks。

如果您遵循此范例，您的代码将如下所示：

const [loading, setLoading] = useState(true);
const fetchUserCognito =useCallback(async()=>{
    dispatch(setCurrentCognitoUserThunk())
}, []);
    
const fetchUserData=useCallback(async()=>{
    dispatch(getUserData(user.currentUser))
}, []);
    
const fetchTopCategories=useCallback(async()=>{
  dispatch(getTopCategoryOfUser(String(user.currentUser)))
}, []);

const fetchingProcess=useCallback(()=>{
    fetchUserCognito()
    .then(()=>{fetchUserData()})
    .then(()=>{fetchTopCategories()})
    .finally(()=>dispatch(closeLoader({})))
 }, []);
    
useEffect(() => {
    if (loading) {
        setLoading(false);
        //fetching Datas to display it
        fetchingProcess()
        orderCategories();
        dispatch(closeLoader({}))
    }
  }, [loading]);

Redux Dispatch 保持运行

Redux Dispatch Keeps Running

reactjs

react-native

redux

react-redux

redux-toolkit

Redux Dispatch 保持 运行

Redux Dispatch Keeps Running

reactjs

react-native

redux

react-redux

redux-toolkit

Redux Dispatch 保持运行