상태관리 (redux)- vanilaJS 로 만들기

roberto·2022년 6월 17일
vanilaJS
0
post-thumbnail

상태관리 를 사용하기위해 redux를 사용하고 있었다
redux 가 어떤것인지 redux 가 어떻게 구성되어있는지는 알고있었지만
redux를 어떻게구현할까? 상태 관리를 어떻게 구현할까? 에대한 고민이 있었다.
이전에 xx회사 실습 과제에서도 이와 비슷한 질문(상태관리를 js로 구현해보세요)를
받았었고 겸사겸사해서
vanilaJS로 redux를 구현해 보기로 했다.

먼저 redux의 구성요소들을 구현하기위해 구성요소들을 살표보자

redux구성요소

1.store 만들기:


만들어야할 기능 :


1.createStore

  • createStore(reducer)로 Redux store를 생성할 수 있다.

  1. getState()
  • getState()를 통해 현재 state를 가져올 수 있다.

  1. dispatch(action)
  • dispatch(action)을 사용하여, store의 reducer에 action을 전달한다. (redux에서 상태 변경을 일으킬 수 있는 유일한 방법)

  1. Reducer를 이용하여 상태를 생성하는 부분을 정의
    (Reducer는 이전 state와 Action을 참고하여 새로운 state를 만들어서 반환하는 방식)

| 선수 학습

옵저버 패턴

컴포넌트들의 상태관리를 위해 우리는 옵저버 패턴을 이해하고 가야한다
렌더링 시켜줄 컴포넌트를 store에 담아놓고 해당 컴포넌트들의 상태변화시 store 에서 응답을 받아 상태에 따라 다시 렌더링을 해줘야 하기떄문이다


| 개념 :
이벤트 발생시 그이벤트를 바라보는 옵저버들이 반응하는 기능이다
ex) 아침에 알람이 울리면 가족구성원들은 잠에서 꺤다


| 구현 :

1.이벤트를 감지할 observer 인터페이스를 만든다
observer 인터페이스는 이벤트 발생시 실행함수()를 가지고 있다
2.이벤트를 만든다 이벤트에는 옵저버들을 소유하고 있다
옵저버들을 소유하기 위해 이벤트에는 옵저버들을 추가하기위한 addObserver() 가 필요하고
소유하고 있는 옵저버들의 실행함수()를 실행 하기 위한 실행함수 트리거함수( ) 가 필요하다

store.js

//스토어 생성 함수
function createStore(reducer){
	
    //state 함수 내부 스코프를 가지게함 
    let state; 

    //렌더링 시켜줄 컴포넌트 담을 그릇 
    const objList = new Set();
    
    //현재 상태 가져오는 메소드 
    const getState = () => ({...state});
    
    const dispatch = (action) => {
    	state = reducer ( state , action );
        
        notify();
    }
    
    //state에 어떤 이벤트가 발생할때 실행되어야하는 함수를 등록하는 함수
    //=> 변화를 감지하면 나에게도 알려달라고 구독하는것 
    const subscripbe = (component) => objList.add(component);
    
    //state가 변경되면(액션이 호출되면) 등록된 구독 내용(objList)을 수행하기 위한 기능 
    const notify = ()=> objList.forEach( (component) => component());
    
    return {
    	getState,
        dispatch,
        subscribe
    };
    
}

const sotre = createStore(Reducer);

store.dispatch()

참조

profile
roberto
medium 으로 이전했습니다
이전 포스트

프론트 관점에서 인터파크 장애 살펴보기

다음 포스트

상태관리 (redux)- vanilaJS 로 만들기

0개의 댓글