TIL 17 Redux 정리

🔑 Q5. Redux는 무엇이고, 왜 Redux를 사용하는가?

Redux? ( ≒ MobX, Overmind.js, Recoil )

1. React에서 사용률이 가장 높은 상태관리 라이브러리.
2. 자바스크립트로 만든 앱을 위한 상태 컨테이너.
3. React에서 사용을 많이 하지만, React만을 위한 라이브러리는 아님.
4. 자바스크립트로 만들어진 다양한 프레임워크와 작동이 가능.

---

구조

1. Flux구조를 기반으로 만들어짐.
   • Flux 구조
     1. Action(동작)이 발생하면,
     2. Dispatcher(관리자)에 의해
     3. Store(저장소)에 변경된 사항이 저장되고
     4. View가 그 저장된 사항에 의해 변경되는 패턴
   • Redux 구조
     1. Action(동작)이 발생하면,
     2. State가 처리, 기능이 있으면 처리 후, 아니면 바로 Reducer로
     3. Reducer에서는 로직에 따라 새로운 상태값 반환
     4. 새로운 상태값을 Store에 저장
     5. View가 Store를 지켜보다가 변화가 감지되면 화면 갱신
2. 단방향, 일관적으로 동작
3. 서로다른 환경(서버, 클라이언트, 네이티브)에서도 작동

---

동작방식

1. View에서 상태값을 변경하고 싶을 때 Action을 발생시킨다.
2. Action이 발생되면, 그것을 State가 처리한다. State는 옵셔널. 기능이 있다면 내부에서 한번 처리 후 Reducer로 넘어가고 기능이 없다면 바로 Reducer로 넘어간다.
3. Reducer에서는 해당 Action에 의해서 상태를 어떻게 변경할지에 대한 로직이 담겨져 있다. 그 로직에 맞춰 새로운 상태값을 반환한다.
4. 새로운 상태값은 Store에 도달하고, Store는 새로운 상태값을 저장한다.
5. Store를 바라보고 있는 옵져버들이 있는데, 옵저버들은 변경사실을 알게 됨
6. 주로 View가 옵져버가 되는데, 데이터가 변경되었다는 사실을 알면 화면은 갱신한다.

---

사용이유

1. props 문법 귀찮을때 ⇒ 모든 component가 props없이 state를 꺼낼 수 있음
2. state 변경관리 할 때 ⇒ state관리 용이
   • 버그가 생길때 컴포넌트를 뒤져봐야 함
   • 버그가 생길 때 store만 찾아보면 됨.

⇒ 큰 프로젝트를 할 때 필수

---

Redux 3원칙

1. 하나의 애플리케이션에는 하나의 Store만 존재
2. State는 읽기전용이다. ⇒ 변경하고자하면 reducer를 통해
3. Reducer는 순수함수여야 한다.
   • 순수함수

     function add(a, b) {
             return a + b;
           }
     
           console.log(add(10, 5));
           console.log(add(10, 5));
           console.log(add(10, 5));
     

     순수함수가 아닌경우항상 동일한 인자가 들어가도 c값에 따라서 결괏값이 달라질수 있다.
   • let c = 10; function add2(a, b) { return a + b + c; } console.log(add2(5,5)) // 20 c = 15 console.log(add2(5,5)) //25
   • 순수함수