如何在next.js getStaticProps中调度动作

mkshixfv  于 2023-05-17  发布在  其他
关注(0)|答案(1)|浏览(100)

我是NextJs的新手。我希望在API调用解析后加载组件&我希望将此API调用的响应存储在redux存储中。
以下是我的组件:

const BlogPage = () => {
  return <p>Blogs</p>;
};

export const getStaticProps = async () => {
  const dispatch = useDispatch();
  const nuggetList = await dispatch(getNuggetsList());
  return {
    props: {
      nuggetList,
    },
  };
};

Action.js:-

import axios from "axios";
export const GET_NUGGET_LIST = "GET_NUGGET_LIST";

export const getNuggetsList = () => {
  return async (dispatch) => {
    const res = await axios.get("/blog/nuggets").catch((error) => {
      throw error;
    });
    dispatch({ type: GET_NUGGET_LIST, payload: res.data });
    return res;
  };
};

Reducer.js:-

import { GET_NUGGET_LIST } from "./action";

const initialState = [];

export const NuggetList = (state = initialState, action) => {
  switch (action.type) {
    case GET_NUGGET_LIST:
      return { ...state, nuggetList: action.payload };
    default:
      return state;
  }
};

问题是:
1.未发出API请求
1.当我将鼠标悬停在Component页面中的await语句上时,它显示为await has no effect on the type of this expression
有什么建议吗?

83qze16e

83qze16e1#

GetStaticProps只在服务器端运行,这就是为什么你的redux逻辑不起作用的原因。您可以使用next-redux-wrapper_app页面中初始化redux存储时分派数据。

相关问题