redux 사이클과 구조 오늘은 redux안에서 action과 데이터가 어떻게 흐르는지 이해하고 미들웨어를 통한 사이클을 정리해보려 한다..! 그림으로 보면 아래와 같다. 출처; https://stackoverflow.com/questions/51610872/storing-to-redux-on-page-load/51611975 middleware action은 dispatch 이후 여러 middleware를 먼저 통과한 후 reducer에 도달한다. 이때 중간에 있는 함수들을 middleware라고 한다. ex. redux-thunk, redux-logger 위와 같이 dispatch를 통해서 action이 전달된 reducer는 상태를 수정하는 것이 아닌 전체를 변경시키는 방식으

일일회고 📌 scrum 22.4.14 회의록 > 어제: 기능연결, 로그인 back데이터 받아오기 정상적으로 됨. 상태관리 기능 연결은 마침. ⚠️issue 정상적으로는 되지만 state 문제가 있어서 왜 그런지 찾아볼 것. // 오늘 : 인증 페이지 화면을 만지려고 함. ✔️ 문제점 해결 state로 들어올 때 { user : ... } 형식이 아니라 userReducer가 통째로 들어오는 이유는 combineReducers를 썼기 때문이었다. 나중에 reducer들이 늘어나면 추가하려고 넣었던 건데, 이것이 함정이었다.. ✔️ 코치님 코멘트 ✅ CASE : state의 값이 정상적으로 들어오지 않을 때 userReducer에서 state 값에 명확히 초깃값을 할당해 본다. 1번으로 해결되지 않는 경우 useSelector(state => state ? state.posts : {}) 방식을 적용한다. 다음과 같은 방식은

일일회고 📌 Scrum 22.4.12 scrum 회의록 >로그인이 기본 이메일 비번 방식에서 구글로만 하는 걸로 결정했음. 이에 따라 이전 프로젝트 코드를 이해하고자 분석했음. 프론트 분들에게 ⚠️ 이전 프로젝트 스켈레톤 코드에서 useContext 랑 useReducer , dispatch 썼고, 이걸 recoil로 하면 바로 바꿀 수 있겠다고 생각했는데 dispatch도 있어서 간단하지 않았음. 오히려 redux가 수월할 것 같음. 어떠한지? - 영우 🆗. 파일 경로도 만들면 말씀 드리겠음. redux 폴더 만들어서 작업하겠음. 오늘은 상태관리 마치는게 목표. ▶️ 결과 : redux 코드는 모두 구현 완료했지만 아직 Back쪽과 연결을 하지 못한 상태. 22.4.12 scrum 회의록 > redux 기능 돌려보기, 인증방식 질문으로 하는 걸 해볼 듯. 백엔드와 얘기 할 필요. ▶️ 결과 : redux 기능 돌리기 완료.. 인증 화면

Redux란? > 앱 전체 상태를 관리하기 위한 라이브러리 Redux 핵심원칙 Single Source Of Truth - Store는 단 하나이며, 모든 앱의 상태는 이곳에 보관된다. Immutability - 상태는 오로지 읽을 수만 있다. 상태가 만약 객체라고 한다면 재생성할때, 무조건 새로운 객체를 생성하는 방식으로 변경해야 한다. Pure Function - 상태의 변경은 어떠한 사이드 이펙트도 만들지 않아야 한다. Action > 상태의 변경을 나타내는 개념 주로 type, payload를 포함하는 JS객체의 형태. 액션 외의 다른 일은 일어나지 않으며, 큰 상태를 나타내기 보단 작은 상태를 잘게 쪼개(atomic) 최소한의 의미를 가지도록 만드는 것이 좋다. Action Creater > Action을 생성하는 함수 직접 Action을 생성하는 것보다 Action Creater를 활용하면 재사용성이 좋고 하나의 레이어

Redux-Toolkit > redux helper 라이브러리 redux-devtools, immerjs, redux-thunk, reselect 등의 라이브러리가 미리 포함됨 Redux-Toolkit 종류 >* configureStore createAction createReducer createSlice createSelector ✔️ configureStore > rudex의 createStore 함수를 래핑하며 named parameter로 쉽게 store를 생성 createStore를 할 때, 여러가지 reducer를 넘길 수 없고 함수 하나를 넘겨야 한다. 이때 state를 분할하여 보내고 싶을 경우 (ex. users, posts, comments...) 각각의 action을 처리하기 위해서는 별도의 reducer1, reducer2, reducer3...이 필요하다. 이러한 번거로운 과정을 하나의 reduce