개발자
Next.js 에서 서버단에서 redux를 사용할 수 없다고 해서 데이터를 하위로 내린 다음 내려받은 props를 redux를 사용해서 담으려고 하는데 계속 빈 배열만 떠서 질문 드립니다ㅜㅜ 제가 어떤걸 잘못 했을까요?
1// 클라이언트
2export default function Home({ result }) {
3
4 const mongoState = useSelector((state) => state.mongo);
5 const dispatch = useDispatch();
6
7 useEffect(() => {
8 // 컴포넌트가 처음 렌더링되었을 때 함수를 실행
9 dispatch(addmongo(mongoState,result));
10 }, []);
11
12// 리덕스
13const mongo = createSlice({
14 name : 'mongo',
15 initialState : [{}],
16 reducers : {
17 addmongo(state, action) {
18 state.mongo.push(action.payload);
19 }
20 }
21})
답변 1
안녕하세요~ 리덕스쪽에 문제가 없다면 시점문제일것 같은데요! 보여주신 코드로는 유즈셀렉터 구문이 가장 먼저 실행될거고, useEffect로 디스패치하기 전이므로 이니셜스테이트인 빈배열을 가져와서 그런것 같습니다! 아래 링크에서 useEffect 실행순서를 봐보시면 좋을 것 같습니다 ! - https://i-ten.tistory.com/308 강제로 리렌더링을 발생시킨다면 결국에는 디스패치가되면서 유즈셀렉터가 값을 가져올텐데요. 리렌더링이 일어났음에도 불구하고 빈배열이 들어온다면 리덕스쪽 코드를 살펴보셔야 할 것 같습니다! 리덕스쪽 문제가아니라면 result를 ssr props 로 내려받지 말고 ssr에서 디스패치해주는 방법이 있을 것 같습니다! Redux를 서버에서 사용하는 방법은 아래 링크 참고해보시면 좋을 것 같습니다! - https://curryyou.tistory.com/501 - https://www.devkkiri.com/post/56578a18-d1fc-4c67-a2c4-6d64e21cf70c
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!