상태관리 라이브러리로 아직 가장 많이 사용되고 있는 리덕스를 nextjs에 설치하는 과정을 정리해보려 한다. Redux 관련 모듈 설치 npm install redux next-redux-wrapper react-redux --save redux next-redux-wrapper Next.js의 서버사이드 렌더링 관련 복잡한 설정을 쉽게 해주는 HOC react-redux react 바인딩 npm install -d redux-devtools-extension @types/next-redux-wrapper @types/react-redux redux-devtools-extension : 개발자 도구 사용을 위한 라이브러리 npm install redux-saga redux-saga는 type을 자체적으로 지원하기 때문에 @type/redux-saga는 필요 없음(deprecated 됨) npm i immer 참고 문헌 ht

redux가 처음 접할 땐 복잡해서 어렵게 느껴지는데 saga 라는 것 까지 더 해지니 더 복잡해 보였다. 그런데 알고보면 그렇게 어려운 개념은 아니었다. saga는 단지 redux가 한번의 이벤트로 두가지 이상 action을 실행해야 할 때 사용하면 좋다. saga는 리덕스가 스토어를 생성할 때 미들웨어로 장착해서 사용하면 된다. dispatch가 액션을 전달(reducer와 saga에 동시에 전달, reducer가 약간 더 빠르게 전달받음) reducer로 전달 미들웨어인 saga로 전달이 된다. saga에서 설정한 이벤트리스너와 비슷한 effect들이 action이 들어오는 것을 watch하고 있다가 dispatch에 의해 action이 reducer로 전달 되기전에 미들웨어인 saga로 들어오면 effect에 의해 트리거된 제너레이터 함수가 순차적으로 여러 action을 실행한다. 제너레이터 함수 안의 put이펙트가 dispatch와 같이 action을 red

리덕스 흐름 분석 기본 : Action creator > action > dispatch > reducer > state component 내 이벤트 호출(클릭, 입력 등) 이벤트와 연결된 action creator 호출 action creator가 생성한 action호출 action이 reducer로 전달 됨(dispatch에 의해) dispatch된 action의 영향으로 reducer의 state값이 변화 렌더링 노드버드 로그인 redux 세팅 component 내 이벤트 호출 이벤트와 연결된 action creator 호출 action creator가 생성한 action호출 action이 reducer로 전달 됨(dispatch에 의해) 로그인 버튼 클릭 - submit -> onSubmitForm 함수 실행 -> dispatch안의 loginRequestAction에 의해 actio

생활코딩Redux 1. Redux란? A Predictable State Container for JS Apps 예측가능한 상태컨테이너, JS 앱을 위한 2. Redux 동작 흐름 어떻게 동작하는 가? store : 은행, 정보가 저장되는 곳 state : store안의 실제 정보가 저장되는 곳 state에 직접 접속하는 것은 금지되어 있음 reducer : store를 만들면서 공급해줘야 하는 함수 render : redux랑 상관없이 UI를 만드는 역할을 하는 내 코드 dispatch, subscribe, getState : 은행 창구 직원 render와 협력해서 app을 만듦 state값이 바뀔 때 마다 render()가 실행되려