[React] Redux

Redux

---

모든 상태관리를 부모컴포넌트를 거쳐서 관리가되기때문에 복잡한 프로젝트일시 부모컴포넌트(App.js)가 길어지면서 유지보수가 힘들어질수있다.

그래서 컴포넌트 외부에서 관리하기위해 스토어를 생성하고

각 컴포넌트는 스토어를 구독하여 상태를 관리한다

변화시키는 함수 리듀서를 사용하여 값을 변화시킨다 

parameter : state, action

Redux 3가지 규칙

---

1. 하나의 어플리케이션에는 하나의 스토어가 존재해야한다
• 권장 사항은 아님
• 하나의 어플리케이션에 여러개의 스토어를 사용할수있다
• 여러개의 스토어를 사용할경우 개발도구를 사용할수없다
2. 상태는 읽기전용이다
• 불변성을 유지해야한다
• state에 있는 배열값을 수정하려고 그 배열에 있는 값을 바꾸는것이아닌 값을 바꾼 새로운 배열을 생성하는것처럼 리듀서에 이전 상태값은 건드리지않으며 새로운 객체를 생성하여 값을 변화시킨다
•  불변성을 유지해야하는 이유는  shallow equlity를 이용하여 내부데이터를 검사하기 때문
• shallow equlity는 깊게 들어가서 검사하는게 아닌 얕게 검사하기때문에 성능이 좋다
3. 리듀서는 순수한 함수여야한다 
• 파라미터는 항상 이전상태값과 액션이여야한다
• 리턴값은 항상 같아야한다
• 항상 이전 상태값을 건드리지않고 새로운 객체를 사용하여 변화시킨다
• 리턴값이 다르게 사용할수있는 리듀서 미들웨어가 있다

Redux 적용

---

프리젠테이션 컴포넌트

단순한 뷰만 담당, 스타일 o, dom에서 접근, 리덕스와 직접적 연결 x

컨테이너 컴포넌트

프리젠테이션 컴포넌트와 컨테이너 컴포넌트를 관리

store와 연결되여 리덕스에 직접적인 접근 가능

스타일 x, dom에서도 자주안쓰임

컴포넌트를 꼭 저렇게 나눠야하는건아님 해도 되고 안해도되고

리듀서는 액션객체 type에 따라 변화하는 함수

액션객체는 type중심

export const INCREMENT 같이 타입 변수들을 생성하고 

provider는 store에 좀 더 편하게 연동시켜 컴포넌트 <provider> </provider> 태그안에 연동시킬 컴포넌트를 넣으면된다

ex)

<provider> 

<App/>

</provider>

리듀서는 순수함수여야한다

state와 action을 파라미터로 받으며 항상 같은 반환을 해야한다

state를 변화시킬려면 최초state상태 값이 필요

ex)

const initialState = {

color: 'black',

number: 0

};

리듀서는 action의 type에 따라 다르게 실행

store를 이용하여 구독중인 함수들이 업데이트될때마다 실행됨

컨테이너 컴포넌트를 store에 연결시키려면 react-redux의 connect 함수를 이용

connect 함수의 파라미터로 state변화함수와 액션변화함수를 주면 또다른 함수가 리턴되는데 그 리턴된 함수의 파라미터에 프리젠테이션 함수를 넣어주면 store를 구독하게된다

ex)

const CounterContainer = connect(

mapStateToProps, mapDispatchToProps )(Counter);