能否通过API调用设置Reducer初始状态？代码返回undefined问题求助

一、能否通过API调用设置Reducer的初始状态？ #

可以实现，但不推荐直接这么做。因为Reducer的初始状态是同步初始化的，而API请求是异步操作，组件初始化时API请求还未完成，无法直接将异步返回的结果作为初始状态。通常的做法是先给Reducer设置一个合理的同步初始值（比如空数组），再通过异步请求获取数据后，dispatch action更新状态。

如果一定要在初始化时就用API数据，可以在应用启动时先完成API请求，再初始化Redux store，但这种做法会阻塞应用渲染，影响用户体验，除非数据是应用必需的核心数据。

二、解决当前返回undefined的问题 #

你的代码里出现undefined的原因是：dispatch({type:"FETCHDATA",payload: productdata})是在组件渲染时直接执行的，此时productdata还是初始的undefined（因为useEffect是在组件挂载后才发起API请求，请求完成后才会更新productdata）。

修改方案如下：

方案1：直接在useEffect里dispatch，无需额外useState #

let initialData = {
  products: []
}

const ItemReducer = (state = initialData, action) => {
  switch (action.type) {
    case "FETCHDATA":
      return {
        ...state,
        products: action.payload,
      };
    default: // 必须加default分支，避免未匹配action时返回undefined
      return state;
  }
}

// 组件内代码
const dispatch = useDispatch();
useEffect(()=>{
  axios.get("https://fakestoreapi.com/products")
  .then((res) => {
    // 请求成功后直接dispatch更新状态
    dispatch({type:"FETCHDATA",payload: res.data})
  })
  .catch((err) => console.log("error"))
},[dispatch]); // 依赖项添加dispatch，避免不必要的重渲染

方案2：监听productdata变化再dispatch（不推荐，多此一举） #

如果一定要保留productdata的useState，可以新增useEffect监听其变化：

let [productdata, setProductdata] = useState();
const dispatch = useDispatch();

useEffect(()=>{
  axios.get("https://fakestoreapi.com/products")
  .then((res) => setProductdata(res.data))
  .catch((err) => console.log("error"))
},[]);

// 仅当productdata有有效值时才dispatch
useEffect(()=>{
  if(productdata){
    dispatch({type:"FETCHDATA",payload: productdata});
  }
},[productdata, dispatch]);

关键注意点 #

• Reducer必须包含default分支：如果没有匹配到action类型，必须返回当前state，否则会返回undefined，导致状态异常。
• 异步操作的dispatch要放在请求成功的回调里，确保拿到有效数据后再更新状态。

内容的提问来源于stack exchange，提问作者Ramnath Rajendran