[Redux] redux-wrapper

개인적으로 공부하여 정리하는 내용이므로 틀리거나 다른 부분이 있을 수 있음.

1. Redux-wrapper 라이브러리가 필요한 이유

• react 에서는 단 하나의 리덕스 스토어만 존재하므로 리액트에 리덕스를 붙이는건 어렵지 않다.
• 하지만 next.js에서는 유저가 요청할 때마다 리덕스 스토어를 새로 생성하여 redux 스토어가 여러 개가 될 수 있다. 그리고 이 경우 Next.js가 제공하는 getInitialProps, getServerSideProps 등에서 리덕스 스토어에 접근할 수 있어야 하는데, next-redux-wrapper가 없다면 이 작업이 불가능하다.

2. Redux 사용 환경

• 브라우저에서만 redux 사용
• 서버에서 redux 사용

3. 브라우저에서만 redux를 사용하는 경우

※ 우선 브라우저에서만 redux를 사용하는 경우에, redux-wrapper는 필요없다

• Next.js 서버에서 브라우저의 redux에 접근하지 않는다면, next-redux-wrapper 필요없이 그냥 redux-toolkit를 사용하면 된다.
• next-redux-wrapper는 필수가 아니므로, 서버에서 redux를 사용하는 경우에만 설치하여 사용하면 된다.
  ex) 서버에서 구동되는 getServerSideProps, getStaticProps 등에서 redux를 사용하지 않는 경우다.

4. 서버에서 redux를 사용하는 경우

※ redux-wrapper 필요

• next.js(서버) 상에서 redux에 접근하여 사용(컨트롤)하는 경우
• getServerSiseProps, getStaticProps 에서 redux에 접근하여 redux 액션을 디스패치하면 브라우저의 store 상태를 가져와 수정하고, 해당 브라우저의 store와만 동기화 해주는 작업이 필요하다. 이 작업을 쉽게 처리해주는 라이브러리가 바로 next-redux-wrapper이다.

5. redux-wrapper를 공부하게 된 이유

• 이전에 react 앱에서만 리덕스를 사용했었는데, 리액트에서는 하나의 store만 존재하기 때문에, redux-wrapper 라이브러리를 사용할 필요가 없었다.
• 그리고 지금, next.js 프레임워크를 사용하면서 next 상에 리덕스, 타입스크립트를 같이 세팅하는 연습을 하는 과정에서, 서버에서는 리덕스 store가 여러 개 생길 수 있는 부분, 또 여러 브라우저에서 접근 시에 액션이 일어난 브라우저에서만 store 상태를 변화시키고 동기화 시키는 작업 등이 필요한 경우를 공부하게 되면서 이 부분을 작업하기 위해 redux-wrapper 라이브러리가 필요하다는 것을 알게 되었고, 공부하게 되었다.

참고 사이트
https://curryyou.tistory.com/501