2021.12.22(수) 초안작성
2022.01.04(화) 수정1

Redux

---

What_Redux는 무엇인가

Flux Architecture

• Redux는 위 구조를 쓸 수 있는 구현체 중 하나이다.
• React에 종속적이지 않은 상태를 관리하기 위한 라이브러리
  
  

---

Why_Redux를 쓰는 이유

• 통합테스트가 아니라 단위테스트로 로직에 대해 꼼꼼히 테스트하고싶다.
• 상태관리를 매번 App이라는 큰 컴포넌트를 갖고 처리해야하나?
  -> 적극적인 관심사의 분리를 위해
  
  

---

Step0. 초기 및 업데이트된 상태값 분리(App.jsx)

How_Redux를 쓰는 방법

3가지 원칙

• 전체 상태값(state)을 하나의 객체(store)에 저장한다.
• 상태값(state)은 불변 객체다.
• 상태값(state)은 store에 저장된 순수 함수(reducer)에 의해서만 변경되어야 한다.
  
  

Step1. Store (store.js)

• 분리된 기존의 상태값을 저장
• reducer를 통해 새로운 상태값 업데이트
• 아래와 같은 위치에 reducer 넣어주기
  import { createStore } from 'redux';
// reducer
const store = createStore(reducer);
export default store;
  
  

Step2. Provider (index.jsx)

• 컴포넌트와 store의 연결고리
• App.jsx에서 store을 가져다 쓸 수 있게됨!!
  
  
  

Step3. Reducer (store.js)

• 새로운 상태들을 묶어놓은 것, 기존의 상태도 같이 넣어주는 것이 특징
• 기존의 상태와 action object를 받아서 새로운 상태로 만들어줌!
  ToDo: 테이블 기법, 해시맵 or object 활용해서 if, switch문 없이 기능구현
  
  
  

Step4. react-redux hook (App.jsx)

• useSelector(): store에서 기존의 상태값 얻어오기
• useDispatch(): ()안에 함수를 action creator로 만들어주기
  기존엔 ()안에서 상태를 바꿔줬지만, 이젠 store의 reducer가 상태를 바꿔주기 때문에 action creator의 역할만 해주면 된다.
  import { useSelector, useDispatch } from 'react-redux';
  
  

Step5. Action creator (App.jsx)

• type(string): 액션의 이름
• payload(object): 새로운 상태값
  
  
  

Step7. Provider대신 Mocking (App.test.jsx)

• 전체에 대한 mock을 위해 mocking파일 만들기
• mocking파일에 테스트를 위한 예제값을 몰아주고 테스트에서 실제로의 초기값과 차별화를 줄 수 있다.
  jest.mock('파일이름');
useSelector.mockImplementation((state) => ({}));
  
  

Step8. Redux Test

• 상태를 바꿔주는 reducer에 대한 test작성
  
  

Step9. React에서 Redux 사용하기

• Page에 모여있는 관심사들을 Container Components로 분리

  • Container Components
    : redux를 알고 있음. 데이터를 가져오고 상태를 업데이트함.

• 결과적으로 App이 조립하는 역할만 해주는 Presentational Components가 됨

  • Presentational Components
    : redux를 알지 못함. 보이는 것(View)에만 집중함.
    
    

• 기존에는 상태를 App에서만 관리했지만, redux가 상태관리를 해줘서 useSelector, useDispatch만 가지고 있으면 다른 곳에서도 처리가 가능

• 컴포넌트를 단하나의 관심사를 갖고 움직일 수 있게 구성하면, 어떤 변경이 있더라도 대응하기 쉬워짐
  
  

---