Redux

yarn add next-redux-wrapper @reduxjs/toolkit react-redux redux
yarn add @types/react-redux

next-redux-wrapper

리액트는 1개의 store를 갖지만, next는 요청할때마다 store를 생성한다.
그리고 next의 getInitialProps나 getServerSideProps등에서 리덕스에 접근할 수 있게 해주어야 한다.
HYDRATE : 서버단에서 번들링된 js파일을 html파일과 매핑해준다.

// store/index.ts
const makeStore: MakeStore = () => createStore(reducer);
export const wrapper = createWrapper(makeStore);

// _app.tsx
export default wrapper.withRedux(App);

@reduxjs/toolkit

리덕스의 개발도구이다.
createAction나 PayloadAction과 같은 메소드를 사용할 수 있다.

//action type, action creator, reducer를 한 번에 작성할 수 있다.
// reducer의 키 값으로 액션 함수가 자동으로 생성된다. 
createSlice({
	name: 'user',
  	iniitalState,
  	reducer: {}
})