리덕스

왜 쓰는가 ??

---

• 상태관리를 할 때
• App에 있는 컴포넌트를 두개로 분리할 때
• state와 props만 이용해서 만들면 추후에 App 컴포넌트를 수정하고 싶어도 어렵다. 자식 컴포넌트는 부모 컴포넌트의 state를 맘대로 조작할 수 없기 때문
• 그렇다면 만약 App 컴포넌트와 새로 분리할 컴포넌트가 같은 데이터저장소에 있다면?
• 새 컴포넌트를 추가하면, App이 보고있는 데이터도 같이 추가가 될 것
• 이러한 개념이 Redux이다 !

  리덕스는 데이터를 한 군데 몰아넣고, 여기저기 꺼내볼 수 있게 해준다.

용어 개념과 흐름 이해하기

---

Store, Component, Action, Reducer 이 네가지를 꼭 이해해야한다.

1) State

• 전역으로 가지고 있는 데이터
• distionary 형태로 보관한다. { [key] : value; }

2) Action

• 상태를 변화시킬때 발생함
• 객체 형태로 씀 {type: 'CHANGE_STATE', data:{...}}

3) ActionCreator

• 액션생성 함수 / 액션을 만들기 위해 사용
• 함수 형태로 씀
  export const createComment = (textComment) => { return {type: CREATE, textComment}; }

4) Reducer

• 리덕스에 저장도니 데이터를 변경하는 함수
• 상태, 리덕스의 데이터값을 가져옴 / 액션을 호출하기 위한 내장함수를 포함
• dictionary 형태로 씀

5) dispatch

• 액션을 발생시키는 역할
• store의 내장함수로 자주 쓰임!
  
  

꼭 기억해야 할 특징 3가지

---

1) Store는 1개만 쓴다.

• 단일스토어 규칙 : 한 프로젝트에는 한 스토어만 존재하도록

2) Store의 State는 오직 Action으로만 변경할 수 있다.

• 불변성

3) 어떤 요청이 와도 Reducer는 같은 동작을 해야한다.

• 즉 Reducer는 순수한 함수여야한다.

2. 리덕스 설정하기

2-1 폴더 및 파일 만들기

• action, action함수, reducer를 구분지어 만들어준다.

index.js

• Reducers를 컴포넌트화했기때문에 index.js에는 HYDRATE외엔 특별히 다루지 않는다.

user.js

• import한 컴포넌트에서 데이터를 받아온 후 로그인 정보가 맞는지 확인
• return 값에 action의 type명과 가져오는값을 써준다.
  

pages/index.js

• 최종적으로 활용 예시
• 로그인정보를 받아온 후 로그인 시에만 보일 수 있게 적용