NextJs 사용할때 getStaticProps 에서나 아니면 다른곳에서 dispatch 사용하는방법이 있을까요?

next-redux-wrapper 라이브러리로 서버에서도 dispatch 할 수 있습니다! 직접 구현해보지는 않았지만, 한 때 NextJs Redux 관련하여 찾아봤던 기억이 있어서 답변 남겨드립니다. 당시 제가 읽었던 블로그 글인데, 친절하게 설명 잘 되있어서 참고해보시면 좋을 것 같습니다! https://curryyou.tistory.com/501 https://www.devkkiri.com/post/56578a18-d1fc-4c67-a2c4-6d64e21cf70c

'getStaticProps'는 Next.js의 데이터 가져오기 함수입니다. 이는 서버 측에서 실행되며, 페이지를 빌드할 때 한 번만 호출됩니다. 이 함수에서 Redux의 'dispatch'를 사용하려면, Redux store를 생성하고, 'dispatch' 메서드를 직접 호출해야 합니다. #1 은 'getStaticProps'에서 Redux action을 디스패치하는 예시입니다: 아래 코드에서 'initializeStore' 함수는 Redux 스토어를 생성하는 함수이고, 'yourAction'은 디스패치하려는 Redux 액션입니다. 그러나 이 방식은 서버 사이드 렌더링이나 정적 생성에만 적합합니다. 클라이언트 측에서 'getStaticProps'를 사용하면 에러가 발생합니다. 이 함수는 페이지를 빌드할 때만 실행되며, 클라이언트 측에서는 실행되지 않습니다. 클라이언트 측에서 Redux 액션을 디스패치하려면, React의 'useDispatch' 훅을 사용해야 합니다. #2 이 훅을 사용하면 컴포넌트 내부에서 Redux 액션을 디스패치할 수 있습니다. 여기서 주의해야 할 점은 'useDispatch'와 같은 React 훅은 React 컴포넌트 내부에서만 사용할 수 있다는 것입니다. 이 훅을 컴포넌트 외부에서 사용하면 에러가 발생합니다.

1#1
2import { initializeStore } from '../redux/store';
3import { yourAction } from '../redux/actions/yourAction';
4
5export async function getStaticProps() {
6  const reduxStore = initializeStore();
7  const { dispatch } = reduxStore;
8
9  dispatch(yourAction());
10
11  return { props: { initialReduxState: reduxStore.getState() } };
12}
13
14#2
15import { useDispatch } from 'react-redux';
16import { yourAction } from '../redux/actions/yourAction';
17
18function YourComponent() {
19  const dispatch = useDispatch();
20
21  useEffect(() => {
22    dispatch(yourAction());
23  }, [dispatch]);
24
25  // ...
26}