리덕스와 리듀서의 개념
프로젝트를 리엑트,타입스크립트,플라스크레스트엑스로 진행하게되었다.
리엑트부분에서 리덕스와 리듀서를 사용하게 되었는데 개념이 잘 정리가되지않아서
정리하게되었다.
● 리듀서(Reducer)
○ 이전 상태와 동작을 받아 새 상태를 리턴한다.
○ 외부의 데이터 구조를 변형하는 호출은 X
○ 기존의 상태를 변형하지않는 선에서 새상태를 리턴해준다.
○ 리듀서가 포함하고 있는 3가지는 다음과 같다.
- Action(할 일을 정의)
- 애플리케이션의 모든데이터를 저장하고있는 state
- state와 action을 받아 새 상태를 리턴해주는 Reducer
● 리덕스(Redux)
1. 자바스크립트 상태관리 라이브러리이다.
2. 리덕스의 본질은 Node.js모듈
3. 리덕스에서는 상태를 저장소(store)에 보관한다.
4. 저장소는 리듀서를 실행하여 새 상태를 유지할 책임을갖는다.
5. 리엑트에서는 setState 메소드를 활용해야만 상태변경이 가능하다.
6. 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.
7. 변경은 순수함수로만 가능하다.(리듀서와 연관되는 개념)
8. Store - Action - Reducer
○ 장점
- 상태를 예측 가능하게 만든다. (순수함수를 사용하기 때문)
- 유지보수 (복잡한 상태 관리와 비교)
- 디버깅에 유리(action과 state log 기록 시) -> redux dev tool (크롬 확장)
- 테스트를 붙이기 용의 (순수함수를 사용하기 때문)
● Store(스토어)
○ store는 상태가 관리되는 공간이라고 생각하면된다.
○ 컴포넌트와는 별개로 스토어라는 공간이있어, 그 안에 앱에서 필요한 상태를 담는다.
○ 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.
● Action(액션)
○ 액션은 앱에서 스토어에 운반할 데이터를 말한다 (주문서)
○ 액션은 자바스크립트 객체 형식으로 되어있다.
○ 액션을 리듀서에 전달하기위해서는 dispatch()라는 메소드가 필요하다.
○ dispatch(액션) -> reducer호출 - > 새로운Store생성