Next에 Redux를 적용하려면
Redux
yarn add next-redux-wrapper @reduxjs/toolkit react-redux redux
yarn add @types/react-redux
next-redux-wrapper
yarn add next-redux-wrapper @reduxjs/toolkit react-redux redux
yarn add @types/react-redux
리액트는 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: {}
})
Author And Source
이 문제에 관하여(Next에 Redux를 적용하려면), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minai/다시-공부한-리덕스저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)