TIL 23.02.24

오늘은 리덕스를 이용하여 상태관리를 해보는 실습을 진행하였다.

 

시작하기에 앞서서, 한 곳에 모든 코드를 작성하지 않고,

Redux코드를 action, reducers, store 디렉토리로 분리해주면서 코드를 작성했다.

 

Store.js

리덕스 확장프로그램을 사용할 경우 발생하는 에러를  방지해주는 composeEnhancers를 선언해주고,

createStore 메서드를 활용해 Reducer를 연결하며, composeEnhancers  로 에러를 방지해주며 Store를 생성해준다.

 

---

inititalReducer.js

 

Dispatch에게서 전달받은 Action 객체의 type값에 따라서 상태를 변경시키는 함수를 작성한다.

카트에 item을 추가하는  ADD_TO_CART, 카트에서 item을 제거하는 REMOVE_FROM_CART,

장바구니의 수량을 설정하는 SET_QUANTITY 함수를 작성해 주었다.

 

 

모든 함수들은 Object.assign() 메소드를 조작하여 구현하였다,

기존에 알고있었던 지식으로는 객체들을 모두 합치는 메소드라고만 알고 있어서,

기존에 존재하는 프로퍼티와 동일명의 프로퍼티가 오면, 둘이 합쳐진다고 생각했었는데

실제로는 이후에 온 프로퍼티로 덮어써졌다.

Object.assign({a:2},{a:3})
//내가 생각한 값 {a: [2,3]}
//실제 결과 {a: 3}

 

 

이 부분이 헷갈려서 REMOVE_FROM_CART 함수 구현에 어려움을 겪었었는데, 메소드의 정확한 기능을 알고 문제를 해결하였다,

 

오늘은 Store와 Reducer의 코드를 구현하였고,

월요일에는 추가적으로 Action과 useDispatch,useSelector 부분을 구현해야겠다.