React) 16장 redux 라이브러리

리덕스의 장점

1. 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적으로 관리한다.
2. 컴포넌트 끼리 상태 공유시 손쉽게 상태값을 전달하거나 업데이트가 가능하다.

단순히 전역 상태관리만 한다면 Context API로 충분하지만,

프로젝트의 규모가 클 수록 리덕스를 사용해 상태를 더 체계적으로 관리할 수 있다.

→→ 코드의 유지보수성을 높이고 작업효율( 편한 개발자 도구 지원, 미들웨어 기능 지원 )을 극대화 한다.

 

 

1. 개념 정리

1. 액션
   상태에 변화가 필요하면 액션이 발생한다.
   객체로 표현되며 다음과 같은 형태를 갖는다.
   대부분 이름은 대문자로 작성하며 고유성을 갖아야 한다.
   { type: 'Toggle_Value' }  //  액션 객체는 type 필드를 갖어야 한다.
   
2. 액션 생성 함수
   액션 객체를 만들어주는 함수이다.
   변화를 일으킬 때 액션 객체를 반복적으로 작성이 번거롭고, 실부 발생을 방지하기 위해 함수를 만들어 관리한다.
   액션 객체는 무조건 type값을 갖아야 한다.
   function addTodo (data) { return { type: 'ADD_TODO', data };
   const Add_todo = data => ({ type: 'ADD_TODO', data };
   
   
3. 리듀서
   변화를 일으키는 함수
   액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션객체를 파라미터로 받아온다.
   그리고, 두 값을 참고하여 새로운 상태를 만들어서 반환한다.
   
   
4. 스토어
   프로젝트에 리덕스를 적용하기 위해 단 한개의 스토어를 생성한다.
   스토어안에 현재 애플리케이션 상태와 리듀서가 들어있으며,
   중요한 내장함수를 지닌다.
   
   
5. 디스패치
   스토어의 내장함수 중 하나이며, 액션을 발생 시킨다.
   dispatch(action)과 같은 형태로 액션객체를 파라미터로 넣어서 호출한다.
   →→ 스토어는 리듀서 함수를 실행 → 새로운 상태 반환
   
   
6. 구독
7. 스토어의 내장 함수 중 하나이다.
8. subscribe 함수안에 리스너 함수를 파라미터로 넣어서 호출하면,
   리스너 함수가 액션이 디스페치되어 상태가 업데이트 될 때만다 호출된다.
   const listener = () =>{
       console.log("상태 업데이트");
   }
   const unsubscribe = store.subscribe(listener);
   unsubscribe();

 

 

2. 리액트 없이 사용하는 리덕스

리덕스는 리액트 라이브러리가 아니다.

React에서 사용하려 했지만 다른 UI 라이브러리/프레임워크와 함께 사용할 수 있다.

ex) angular-redux, ember redux, Vue

 

 

3. 리덕스의 세 가지 규칙

1. 단일 스토어
   하나의 애플리케이션에는 하나의 스토어가 존재한다.
   여러개의 스토어 사용은 가능하나, 특정 업데이트가 빈번하게 일어나거나,
   특정 부분을 분리 시킬 때 상태관리가 복잡해 질 수 있다.
   
   
2. 읽기 전용 상태
   리덕스는 읽기 전용이다.
   상태 업데이트에서는 불변셩을 지켜주어 기본객체를 두고 새로운 객체를 생성하며 업데이트 해준다
   불변성의 필요성은 리덕스에서는 내부적으로 데이터가 변경되는 것을 감시하기 위해 얕은 비교를 하기 때문이다.
   
   
3. 리듀서는 순수한 함수
   리듀서는 순수한 함수여야 한다.
   리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받음
   파라미터 외의 값에는 의존하지 않는다.
   이전 상태는 건들지 말고, 변화를 준 새로운 객체 생성 반환 (불변성)
   같은 파라미터로 호출된 리듀서 함수는 같은 값을 반환해야 한다.

https://github.com/Gotkwondo/just_do_it/tree/main/ReactStudy/vanilla-redux

GitHub - Gotkwondo/just_do_it: My first repository project