상태 관리 redux 라이브러리에 대한 내용입니다.
리덕스 라이브러리 이해하기
- 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다.
- 전역 상태를 관리할 때 굉장히 효과적
(단순한 전역 상태 관리라면 Context API 로 충분)
-> 리덕스는 체계적으로 상태를 관리할 떄 유용 (프로젝트 규모가 큰 경우)
- 미들웨어 기능 제공하여 비동기 작업을 훨씬 효육적으로 관리할 수 있게 해줌
액션
- 상태 변화가 필요하면 액션 발생 (하나의 객체로 표현)
- type 필드는 반드시 가지고 있어야 함 (이름은 고유해야 한다.)
액션 생성 함수
- 액션 객체를 만들어 주는 함수
- 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 함
- 매번 액션 객체를 작성하기 번거로움 -> ❗️함수로 만들어서 관리한다.
리듀서
- 프로젝트에 리덕스를 적용하기 위해 만듬
- 액션을 만들어서 발생 시키면 리듀서가 현재 상태와 전달 받은 액션 객체를 파라미터로 받아 옴
-> 두 값을 참고하여 새로운 상태를 만들어서 반환
스토어
- 프로젝트에 리덕스를 적용하기 위해 만듬
- 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있음
- 현재 애플리케이션의 상태와 리듀서가 들어 있다.
디스패치
- 스토어의 내장 함수 중 하나
액션을 발생 시키는 것
으로 이해 -> dispatch(action)
- 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 줌
구독
- 스토어 내장함수 중 하나
subscribe()
안에 리스터 함수를 파라미터로 넣어서 호출해 주면,
이 리스터 함수가 액션이 디스패치 되어 상태가 업데이트될 때마다 호출
Parcel로 프로젝트 생성 (vanilla JS)
$ yarn globar add parcel-bundler
- 서버 실행
$ parcel index.html
, 수정 후 파일을 저장할 때마다 새로고침된다.
리덕스의 세 가지 규칙
단일 스토어
읽기 전용 상태
리듀서는 순수한 함수