useEffect中触发Redux action请求商品数据无返回，不使用useEffect时正常

• 1. Thunk未返回Promise导致await失效
     你定义的getProducts thunk没有返回axios调用产生的Promise实例，await props.getProducts()不会等待请求完成就会立即执行后续的console.log，此时Redux状态还未更新，props.products还是初始空数组。
• 2. 闭包捕获旧值
     就算thunk返回了Promise，组件首次渲染时get函数捕获的props是首次渲染的旧值，哪怕请求完成后Redux更新状态触发组件重渲染，本次get函数里的props.products还是初始值，不会拿到最新数据。
• 3. 依赖数组导致循环的原因
     get函数是在组件内部定义的，每次组件重渲染都会生成新的函数引用，放到useEffect依赖数组后，每次重渲染都会触发useEffect重新执行，调用action更新状态又触发重渲染，就形成了死循环。

第一步：修改action代码，返回Promise #

import axios from "axios"
const url="https://my-expressjs-ap.herokuapp.com/products"

export const getProducts=()=> (dispatch: (arg0: { type: any; payload: any }) => any)=>{
    // 新增return返回axios的Promise实例
    return axios
    .get(url)
    .then((response) =>
      dispatch({ type: "GET_PRODUCTS_SUCCESS", payload: response.data })
    )
    .catch((error) => dispatch({ type: "GET_PRODUCTS_ERROR", payload: error }));
}

第二步：修改组件代码，监听products变化获取最新值 #

如果需要在商品数据更新后执行逻辑，单独监听props.products的变化即可：

// 触发数据拉取的effect
useEffect(() => {
    props.getProducts()
// 如果是通过react-redux的connect传入的getProducts，引用是稳定的，不会触发循环
}, [props.getProducts]);

// 监听商品数据更新的effect
useEffect(() => {
    // 这里可以拿到最新的商品数据
    console.log(props.products)
    // 后续处理逻辑写在这里
}, [props.products])

内容的提问来源于stack exchange，提问作者İbrahim Ethem Sancar