Redux

Thumbnail: The Prestige(2006)

Achievement Goals

• 상태관리 라이브러리의 필요성 이해
• Redux( or Flux Pattern) 에서 사용하는 Action, Reducer, Store의 의미와 특징 이해
• Redux의 3가지 원칙, 주요 개념과의 연결 이해
• Presentational Component 와 Container Component의 개념 이해
• Redux hooks(useSelector, useDispatch)를 사용해 store를 업데이트

출처: Code States

React-state, props 이용한 컴포넌트 단위 개발 아키텍처
Redux에서는 컴포넌트와 상태를 분리하는 패턴, 로직을 분리한다면 컴포넌트에서는 표현(UI)에 집중한 단순 함수 컴포넌트를 만들 수 있을 것.
Redux는 react없이도 사용 가능한 상태 관련 라이브러리임

Redux의 3가지 원칙

• 1. sinlgle source of truth: 동일 데이터는 같은 곳에서 가져옴(Store)
• 2. state is read-only: action 객체를 통해서 state변경이 가능함(action)
• 3. changes are made with pure functions: 순수함수로만 변경이 가능하다(reducer)
     *pure functions
     동일한 인자값을 받으면 항상 동일한 값을 리턴
     어디서든 호출되든 동일한 결과를 보여줌
     외부에 영향을 주지도 받지도 말아야 함

App => ShoppingCart => CartItem
부모에서 상태를 관리한다면 state에 접근해서 정보공유가 가능하므로 자식 컴포넌트에서 전달이 불가했다.

store는 전역상태를 담고 있음, 상태를 관리하는 하나의 공간
state를 store에서 관리하면 정보 공유, 데이터 전달이 용이
action 이란 자바스크립트 객체로, store에 데이터를 운반한다. type을 꼭 지정해줘야 함
reducer는 action 객체가 dispacth메서드에 전달되면 reducer를 호출하고, reducer는 store에서 새로운 state를 생성한다
이것은 react의 단일방향 데이터흐름 특성에 기인

Redux는 순수 함수라 다음 상태가 어떤 상태일지 예측이 가능하게 하고,
유지보수가 용이, 디버깅에 유리(action, state log 기록 시)<- redux dev Tool 설치*
테스트를 붙이기에도 쉽다

Redux의 store로 관리하지 않아도 됨,
하나의 컴포넌트에서만 사용하는 state라면 따로 쓸 수도 있음

✯ What is Redux?

🔗 BASICS IN REDUX WITHOUT REACT

위 글을 읽고 다시 한번 정리하자면,(process나 관계를 설명하는 말풀이는 원어로 받아들이는 것이 더 납득이 된다)

• action을 executing 하는 것이 "dispatching"
• store의 state를 변경(update)하기 위해서 action을 dispatch하면 된다. You can dispatch an action to alter the state in the Redux store.
• 웹앱 UI(view)화면 상에서 버튼을 클릭하는 등의 단순한 이벤트가>action dispatching<을 일으킴(trigger)

View(click or .. events) → dispatching action → Reducer → state update in Store → View(새로운 화면 render)
출처: CodeStates

• action이 dispatching 되면 모든 reducer를 통과한다.

Executing an action is called dispatching in Redux. You can dispatch an action to alter the state in the Redux store. You only dispatch an action when you want to change the state. The dispatching of an action can be triggered in your View. It could be as simple as a click on a HTML button. In addition, the payload in a Redux action is not mandatory. You can define actions that have only an action type. In the end, once an action is dispatched, it will go through all reducers in Redux.

• reducer는 pure function이고 state와 action이라는 input이 같으면 항상 같은 output(new state)을 반환
• reducer는 이전 state를 새로운 state로 'reduce'응축해준다.
  the reducer reduces the previous state and incoming action to a new state.

＊ reducer의 immutability

• React에서 state를 변경하기 위해서는 this.state에 바로 할당하는 것이 아닌 this.setState를 통해 state를 변경해주어야 했던 이유를 생각*
• 기존 state를 트래킹하고 로그할 수 있도록, immutable하게 변경해야 함
• react의 virtual DOM으로 렌더 후 real DOM에 전달하는 것이 역할과도 관련

react + flux라는 redux는 기존 flux의 store가 여러개 였다는 점, reducer가 하나였다는 점에서 차이가 있다.

• Redux는 전역상태의 state를 관리하는 하나의 store를 가지고 있고,
• reducer는 여러 개를 정의할 수 있다

• useSelector
• useDispatch

• 📒 미들웨어 thunk 및 Redux review
  출처: Code States

💬 참고
🔗 Immutability in React and Redux: The Complete Guide