next-redux-wrapper

Seunghwa's Devlog·2021년 3월 4일
1

next-redux-wrapper가 필요한 이유

react에 redux를 붙이는건 react app에서는 단 하나의 redux store만 존재하므로 어렵지 않다.
하지만 Next.js를 사용하게 되면 유저가 요청할 때 마다 redux store를 새로 생성하게 되므로 redux store가 여러 개가 될 수 있다.
그리고 Next.js에서 제공하는 getInitialProps, getServerSideProps 등에서 redux store에 접근할 수 있어야 하는데 next-redux-wrapper가 없다면 접근 할 수 없다. 이러한 점 때문에 next-redux-wrapper가 필요하다.

  • 설치
yarn add next-redux-wrapper react-redux
// 1. 스토어를 생성하는 makeStore 함수 정의
const makeSotre : MakeStore<State> = (context : Context) =>
createStore(reducer)

// 2. next-redux-wrapper에서 제공하는 createWrapper 정의
export const Wrapper = createWrapper<State>(makeStore, {debug : true});

next-redux-wrapper는 사용자가 페이지를 요청할 때 마다 redux store를 생성해야 하므로 makeStore 함수를 정의해서 넘기는 것이다

그 후 app.js에서

import React, {FC} from 'react';
import {AppProps} from 'next/app';
import {wrapper} from '../components/store';

const App: FC<AppProps> = ({Component, pageProps}) => (
    <Component {...pageProps} />
);

export default wrapper.withRedux(App)

wrapper의 withRedux HOC로 App component를 감싸준다. 이제 각 페이지의 getInitialProps, getServerSideProps, getStaticProps 등에서 redux store에 접근이 가능해진다.

※ _app.js에서 커스텀 getInitialProps 를 정의하면 안됨 → Next.js의 페이지 최적화 기능을 무효화 시키기 때문이다.

Next.js에서 생성한 redux store와 client에서 생성한 redux store는 다르므로 이 둘을 합쳐야 하는데, Hydrate라는 액션을 통해서 서버에서 생성한 store의 상태를 클라이언트에 합쳐주는 작업이 필요하다.

ex)

import {createStore, AnyAction} from 'redux';
import { MakeStore, createWrapper, Context, HYDRATE } from 'next-redux-wrapper';

export interface State {
	tick : string;
}

// create reducer
const reducer = (state : State = {tick : 'init'}, action : AnyAction) => {
  switch(action.type) {
    case HYDRATE :
      return{...state, ...action.payload}
    case 'TICK' :
      return{...state, tick : action.payload}
    default :
      return state;
  }
};


const makeStore : MakeStore<State> = (context : Context) => createStore(reducer)

export const Wrapper = createWrapper<State>(makeStore, {debug : true})

만약 순수 Next.js만 사용하고 next-redux-wrapper를 사용하지 않는다면 getInitialProps등에서 redux store에 접근이 불가능 하다. 이러한 경우에는 axios나 fetch등의 api 라이브러리를 사용해야한다.

profile
에러와 부딪히고 새로운 것을 배우며 성장해가는 과정을 기록합니다!

0개의 댓글