개발자

redux-toolkit useState 처럼 사용하려면 어떻게 해야할까요?

2023년 07월 25일조회 125

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})
이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 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

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!