[JavaScript] Vanilla JS로 상태 관리 모듈(redux) 만들기

개요

Vanilla JS로 hot한 상태 관리 모듈 redux를 만들어보려고 한다.

우아한 테크러닝 3기 (TypeScript & React)에서 김민태님의 강좌를 참고하였습니다.

해당 문서에는 redux의 기본 패턴인 Flux 패턴에 대한 기본적인 개념이 있어야 합니다.

본문

기본 Store 생성 함수 만들기

 

• 상태를 관리하는 객체 store를 만들어 줍니다.
• redux.js에서 기본 store 생성 함수 정의

Reducer 만들기 & Reducer를 통한 상태 업데이트

 

• reducer는 상태를 업데이트 해주는 주최 입니다.
• dispatch는 store의 상태를 업데이트 하는 주최 입니다.

상태 값의 구독자 등록 함수 & 출판 함수 만들기

 

• subscribe 함수는 상태 값이 업데이트되면 수신할 객체를 등록합니다.
• publish 함수는 dispatch를 통해서 상태 값이 업데이트 되면 subscriber에게 상태 값을 전달 합니다.

이해를 돕기 위하여 Count Action 만들기

 

• createAction 함수를 만들어서 좀더 편하게 Action을 만들도록 하였다.

 

Github로 소스보기

https://github.com/minemanemo/js-example/tree/master/redux