[react] 리덕스

[상태관리] component의 '상태', 즉, 데이터를 관리한다!

부모-자식관계의 상태관리는 OK

props로 관리. 부모-자식 관계, 위에서 아래로!

state로 관리. 부모-부모, 자식-자식

---

한정적인 관계 사이 상태관리의 불편함이 따르는데, 이걸 redux로 해결할 수 있다!

Redux => 전역 상태 관리!

yarn add redux react-redux

리액트는 redux와 별개의 패키지 존속 관계 X

=> 그니까, 다른 프레임워크/라이브러리와 함께 쓸수 있다는것.

---

1. state (딕셔너리 형태) 

리덕스에서 저장하고 있는 '상태' (= 데이터)

{ [key] : value }

2. action (객체) 

리덕스에 있는 데이터, 일부 데이터를 변경하고 싶을 때, 발생하는 어떤 것

{ type : 'CHANGE_STATE', data : {...} }

3. actionCreator (함수) 

액션을 만들기 위해 사용하는 액션 생성 함수

const changeState = (new_data) => {return {type : 'CHANGE_STATE', data: new_data}}

4. reducer (함수) 

리덕스에 있는 상태 (= 데이터)를 실제로 변경하는 함수

[과정]⭐⭐⭐

컴포넌트에서 데이터를 바꿀것

👉 액션 생성 함수 호출 : actioncreator

👉 액션 반환 (= '액션이 만들어졌다') : action

👉 리듀서가! 리덕스의 현재 상태의 액션 객체를 받음.(type) : action의 type

👉 (switch) 상태를 변경해주는거구나~ 구문을 읽어 실제로 데이터를 변환

 

5. store (함수, JSON 형태) 

리덕스를 적용하기 위한 것 (데이터를 볼수 있게 하는애)

리듀서 & 프로젝트 상태를 알고, 리덕스에서 값을 가져오고, 액션 호출하기 위한 내장 함수 포함

6. dispatch (store 내장 함수)  ⭐⭐⭐⭐⭐

컴포넌트에서 리덕스에 있는 데이터를 바꾸려면

👉 액션 생성 함수를 호출하는데, 이때 호출자가 dispatch!

👉 액션을 발생시키는 함수

 

---

* 스토어는 1개만 쓴다! 

리덕스는 오로지 1개만 섬긴다. = '단일 스토어 규칙'

1 project ~ 1 store

* store의 state는 오직  --------  action으로만 변경할 수 있다.

이 규칙을 반드시 따라야 한다.

a에서 b에서 c에서 아무데서나 하면 다른애들이 어디서 바꾼지 모른다.

때문에 action을 발생시켜서 스토어안에 있는 데이터를 바꾸고, 모든 component안에 뿌린다.

ex) setState, useState 사용해서 했다.

= '데이터의 불변성을 유지한다'

어떤 요청이 와도 리듀서는 같은 동작을 해야한다. = '순수한 함수여야 한다' = '외부 파라미터한테 영향받지않는다'

ex) 날짜를 받는 함수는 순수함 함수가 아니다.

= 파라미터가 같으면 항상 같은 값을 반환한다.