리덕스(REDUX)
REDUX*****
- 컴포넌트 코드로부터 상태관리 코드를 분리 할 수 있다.
- 미들웨어를 활용한 다양한 기능을 추가 할 수 있다.
- 강력한 미들웨어 라이브러리
- 로컬 스토리지에 데이터를 저장, 불러오기 - SSR시 데이터 전달이 가능하다.
- 리액트 Context API보다 효율적인 렌더링이 가능하다.
강력한 미들웨어 => 데이터를 처리하는 중간 과정에 로직을 넣어서 필요한 기능을 추가할 수있음.
데이터전달 간편 => 리덕스 상태값은 하나의 객체로 표현이 가능하다. 따라서 그 하나의 객체를 문자열로 변환해서 서버->클라이언트로 전달가능
리액트의 구조**
뷰쪽에서 상태값을 변경하고 싶을때는 액션을 발생시킴. => 그 액션을 미들웨어가 처리하는데 미들웨어에 여러가지 기능을 넣을 수 있고 넣지 않으면 처리없이 리듀서로 넘어간다. 리듀서에서는 해당 액션에 의해서 상태값이 어떻게 변경되는지 그 로직을 남고있다(리듀서의 출력은 새로운 상태값). 그 새로운 상태값을 스토어에게 알려주면 스토어가 그 상태값을 저장. 그리고 스토어에 저장되어있는 옵저버가있는데(데이터관련), 그 옵저버들에게 데이터의 변경 사실을 알려준다. 데이터가 변경되지 않더라도 액션이 발생하면 액션처리가 끝났을때 무조건 옵저버들에게 알려준다. 그리고 뷰에게 전달하면 뷰는 화면을 갱신한다….
세가지 원칙
- 전체 상탯값을 하나의 객체에 저장한다.
- 상탯값은 불변객체다.
- 상탯값은 순수 함수에 의해서만 변경되어야 한다.
상탯값을 불변객체로 관리한다.(01–01)
액션 객체에는 (1) type속성값이 존재해야한다 왜냐하면 type으로 액션 객체를 구분하기 때문이다. (2)type속성값을 제외한 나머지는 상태값을 수정한다. (3) 액션객체와 함께 dispatch메서드를 호출하면 상태값이 변경된다. 리덕스의 상탯값을 수정하는 유일한 방법은 액션 객체와 함께 dispatch메서드를 호출하는 것이다.
액션
type이름을 상수 변수로 만들었다. 이 변수는 리듀서에서도 필요하기때문에 export를 사용했다.
액션 생성자 함수도 외부에서 호출해야 하므로 export사용.
미들웨어
미들웨어는 리듀서가 액션을 처리하기 전에 실행되는 함수이다. 디버깅 목적으로 상탯값 변경 시 로그를 출력하거나, 리듀서에서 발생한 예외를 서버로 전송하는 등의 목적으로 미들웨어를 활용할 수 있다. 특별히 미들웨어를 설정하지 않았다면 발생한 액션은 곧바로 리듀서로 보내진다.
리듀서
리덕스는 스토어 생성시 상탯값이 없는 상태로 리듀서를 호출하므로 매개변수의 기본값을 사용해서 초기 상태값을 정의한다. 액션 type별로 case문을 만들어서 처리한다. 상탯값은 불변 객체로 관리해야 하므로 수정 할 때마다 새로운 객체를 생성한다(전개연산자 사용.) 처리 할 액션이 없다면 상탯값을 변경하지 않는다. 깊은곳에 있는 값을 수정할 때는 코드 가독성이 많이 떨어지므로 immer패키지를 사용하면 편리하다.
produce함수의 첫번째 매개변수는 변경하고자 하는 객체를 나타낸다.
두번째 매개변수는 첫 번째 매개변수로 입력된 객체를 수정하는 함수.
이머를 사용한 리듀서 함수
switch문 전체를 produce로 감싼다. 이머를 사용했기때문에 배열의 push메서드를 사용해도 기존 상탯값은 직접 수정되지 않고 새로운 객체를 반환한다.
createReducer 함수로 리듀서 작성하기
createReducer 함수의 첫 번째 인자로 초기상탯값 입력.
createReducer함수의 두번 째 인자로 액션 처리 함수를 담고있는 객체.
createReducer함수는 리듀서 함수를 반환.
리듀서 함수 전체를 이머의 produce함수로 감샀다.
등록된 액션 처리 함수가 있다면 실행한다.
스토어
스토어는 액션이 발생하면 미들웨어 함수를 실행한다. 리듀서를 실행해서 상탯값을 새로운 값으로 변경한다. 그리고 사전에 등록된 모든 이벤트 처리 함수에게 액션의 처리가 끝났음을 알린다.
스토어는 리덕스의 상탯값을 가지는 객체다. 액션의 발생은 스토어의 dispatch메서드로 시작된다.
