코드메모장

흔히 Redux 와 Vuex 에서 사용하는 디자인패턴이다. 등장배경 MVC (Model, View, Controller) 패턴의 단점을 보완하고 대규모 애플리케이션에서 데이터 흐름을 일관성 있게 관리함으로써 프로그램의 예측가능성을 높이기위함 구조 Action 사용자 측에서 Action의 Type 과 새로운 데이터 payload 를 묶어서 dispatcher 에 전달하는 역할 Dispatcher 데이터들의 중앙허브 라고 할 수있다. Dispatcher는 들어오는 Action 객체 정보를 받아 실제로 어떤 행동을 할지 결정하는 곳이다. React Hook 중 useReducer 로 간단하게 dispatcher 를 사용할 수 있다. Store Store는 애플리케이션의 모든 상태와 관련 로직을 가지고 있다. ..

유투브 api 를 이용해서 프로젝트를 진행중이였다 동영상 리스트를 조회해오는 api 안에 동영상을 게시한 채널의 id는 있지만 채널img 정보가 없기때문에 동영상리스트 api 를 호출 후 받아온 동영상 id 들로 채널정보 api 를 호출한뒤 기존 동영상리스트 api data 에 채널 img 정보를 넣어야 했다. 초기 랜더링시 한번 실행된다. 문제는 초기랜더링이후 두번째 검색때부터 발생한다 호출부 getVideoSearch 라는 이름의 동영상리스트 api 를 호출하고 받아온 response 로 채널의 정보를 가져오는 api 를 호출한다 (unwrap()을 사용하면 redux 의 리턴값을 받을수있다) 동영상 list 를 받아오는 api 이다. 동영상 리스트에서 추출해낸 id 를 직렬화시켜서 채널 정보를 받아..

기존에 만들어놨던 react project 를 RTK 로 마이그레이션 하는도중 딸기우유가 떴다 에러를 직역하자면 'payload.headers' 경로의 작업에서 직렬화할 수 없는 값이 감지되었습니다' Redux 핵심 원칙중 직렬화(serializable) 원칙이 있다. 직렬화할 수 없는 값을 state, action 에 넣지 말아야 한다. 직렬화를 할수없는 값을 넣어도 저장은 되긴하지만 위처럼 redux-devtools에서 에러를 뱉어낸다. react-devtools 혹은 다른 redux 미들웨어들을 사용할때 오류를 감당할 자신이 있으면 non-serializable 타입의 데이터를 저장해도 된다. ( = 하지말라는뜻 ) 나는 직렬화되지않을 값을 return 해주고있었다. extraReducers 를 작..

axios 로 api 를 요청할때마다 interceptors 를 이용해서 store 의 값을 변경하고싶다 axios 설치 npm i axios axios 를 설정해주는 index.js 사실별거없다 그냥 baseURL 설정해주고 헤더 설정을 해주는정도 setUpInterceptors.js 인수로 store 를 받고 그 store 를 이용해서 사용한다. src/index.js 프로젝트가 랜더링 될때마다 만든 setUpInterceptors.js 에 store 를 넣어서 생성한다. 이렇게 설정하면 axios 로 만든 API 라는 함수를 이용해서 API 요청을 보내면 응답이 올때마다 store 에 만들어놓은 store.dipatch(cartActions.test()) 가 실행되게 된다.

설치 $ npm i redux react-redux redux-promise redux-thunk --sava redux-promise : redux state 에 promise 형태의 값을 받을 수 있게해줌 redux-thunk : redux state 에 Function 형태의 값을 받을 수 있게해줌 각 라이브러리 import 해온후 root reducer로 사용할 파일 생성 provider 태그 생성 크롬확장프로그램 redux extension 설치 root reducer