Redux 개념 정리

Store

말 그대로 state가 관리되는 오직 하나뿐인 저장소의 역할을 합니다. Redux 앱의 state가 저장되어 있는 공간이죠.
그래서 우리가 가장 먼저 해 주어야 할 작업은 Store를 만드는 작업입니다.

store > store.js 파일에서 createStore 메소드를 활용해 rootReducer를 연결 해 주고 있습니다.

Reducer

Reducer 는 현재의 state와 Action을 이용해서 새로운 state를 만들어 내는 pure function 입니다.

const itemReducer = (state = initialState, action) => { switch (action.type) { case ADD_TO_CART: return Object.assign({}, state, { cartItems: [...state.cartItems, action.payload] }) default: return state; } }

보통 다음과 같은 모양으로 구성됩니다. 위의 예시에서는 switch문을 통해서 코드를 작성했지만 if문으로 작성해도 무방합니다.
Reducer 함수를 작성할 때 주의해야 할 점이 있습니다. 바로 Redux의 state 업데이트는 immutable한 방식으로 변경해야 한다는 것인데요. Redux의 장점 중 하나인 변경된 state를 로그로 남기기 위해서 꼭 필요한 작업입니다.
왜 immutable 한 방식으로 바꾸어야 하는지 잘 모르겠다면 React life cycle 키워드로 검색해보는 것을 권장합니다. (React에서 state를 변경하기 위해서는 this.state에 바로 할당하는 것이 아닌 this.setState를 통해 state를 변경해주어야 했죠?)
위의 룰에 대해 자세하게 다룬 블로그 글도 시간이 된다면 한번 읽어보는 것을 추천합니다. (React를 잘 사용하기 위해서도 꼭 알아야 하는 내용들이 있어요.)
그렇다면 immutable한 방식으로 state를 변경하기 위해서는 어떻게 코드를 작성해야 할까요? 위의 itemReducer 예제 코드에서 Object.assign을 통해 새로운 객체를 만들어 리턴하는 것을 통해 힌트를 얻을 수 있습니다.

그렇다면 reducers > index.js 파일에서 rootReducer를 구성할 차례입니다.
Reducer은 combineReducers 메소드를 통해 여러 가지의 Reducer들을 하나로 합칠 수 있습니다.

Action

Action은 말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체입니다.

{ type: 'ADD_TODO', text: 'Go to swimming pool' }

보통 다음과 같은 모양으로 구성됩니다. 여기서 type은 필수로 지정을 해 주어야 하며, 그 외의 것들은 선택적으로 사용할 수 있습니다.

이렇게 모든 변화를 action을 통해 취하는 것은 우리가 만드는 앱에서 무슨 일이 일어나고 있는지 직관적으로 알기 쉽게 하는 역할을 합니다.

actions > index.js 파일에서는 action들을 구성합니다.
장바구니를 구현하기 위해서 필요한 액션들이 무엇이 있을지 고민한 후 코드를 작성해보세요.

Dispatch

Dispatch는 Action을 전달하는 메소드 입니다. dispatch의 전달인자로 Action 객체가 전달됩니다.
그리고 Reducer를 호출해 state의 값을 바꾸는 역할을 합니다.

---

여기까지 Action, Reducer, Dispatch, Store 개념들을 코드로 구성하는 것은 완료했습니다. 그렇다면 이제 이 개념들을 연결시켜주어야 할텐데요. connect 할 수 있는 방법은 두 가지가 있습니다.

공식 문서를 통해서도 확인하실 수 있듯이 connect parameter를 통해 mapStateToProps, mapDispatchToProps 등 의 메소드를 이용하는 방법과 Redux hooks를 이용하는 방법이 있습니다.

이 중에서 Redux hooks가 보다 최근에 나온 방법이고 비교적 사용하기 쉽기 때문에 이번 스프린트에서는 Redux hooks를 이용해서 진행하도록 하겠습니다.

Redux hooks에서는 크게 useSelector(), useDispatch() 이 2가지의 메소드를 기억하시면 됩니다.

Redux 공식문서

useSelector()

먼저 useSelector()는 컴포넌트와 state를 연결하는 역할을 합니다.
컴포넌트에서 useSelector 메소드를 통해 store의 state에 접근할 수 있는 것이죠.
shopping cart sprint의 어떤 컴포넌트에서 useSelector를 이용해 state에 접근할 수 있을지 고민한 후 코드를 작성해보세요.
useSelector의 전달인자로는 콜백 함수를 받으며 콜백 함수의 전달인자로는 state 값이 들어갑니다. 자세한 사용법은 공식 문서의 useSelector examples 를 참고하세요.

useDispatch()

useDispatch()는 Action 객체를 Reducer로 전달해주는 메소드입니다.
Action 이 일어날만한 곳은 클릭 등의 이벤트가 일어나는 컴포넌트겠죠.
어떤 컴포넌트에서 useDispatch를 이용해 Action을 Reducer로 전달해줄 수 있을지 고민해보세요.
그런 다음 공식문서의 useDispatch() examples를 통해 dispatch 메소드에 전달인자로 Action이 어떻게 전달되는지 확인하고 코드를 작성해보세요.