[Redux] createStore를 해보자

Redux를 시작하려면 뭐부터 해야할까?

바로 상태를 관리하는 오직 하나의 공간인 store를 만들어야한다.

최근 면접과정에서 라이브코딩으로 Redux의 store를 만드는 함수를 구현하라는 문제가 나왔다.

아이고.. 라이브러리를 로드해서 사용할 줄만 알았지..

안에 돌아가는 메커니즘을 자세히 알려고하지않았던 내 지난 과오가 머릿속에서 좌르륵 흘러갔다.

 

네.. 그렇게 아무것도 하지 못한 채 면접은 끝이났고, 아쉽지만 어쩌겠나.

지금부터 해보자.

 

 

Store

우선, store는 전역 상태를 가진다.

const store = {
	getState,
	subscribe,
	dispatch,
}

 

그리고 전역 상태를 조회하는 getState, 자신이 관리하고 있는 전역 상태를 구독(상태가 변경되면 변경되었음을 전달)할 수 있는 subscribe, action을 인자로 받고 reducer를 통해 전역 상태를 변경시키고 나서 변경사항을 구독자들에게 전달하는 dispatch API를 제공한다.

 

 

CreateStore

createStore는 함수의 인자로 reducer를 받는데 이 reducer는 state를 변경시키는 역할을 한다.

store는 오로지 순수 함수인 reducer를 통해 state를 변경시킬 수 있다.

function createStore(reducer){	
    function getState(){}
    function subscribe(){}
    function dispatch(){}
    
    const store = {
    	getState,
        subscribe,
        dispatch,
    }
    
    return store;
}

 

 

getState

function createStore(reducer) {
    let state = undefined;

    function getState() {
        return state;
    }
    ...
}

 

state를 지역변수로 가지고 getState를 통해 전역 상태를 조회한다.

createStore가 클로저이기때문에 getState는 계속해서 state를 참조할 수 있다.

 

subscribe

전역 상태를 구독할 수 있게 해주는 메소드로,

구독자 배열을 만들어 구독자는 등록해주고 구독을 해제하는 자는 삭제시켜주면 된다.

그러면 store는 구독자 배열을 순회하면서 state가 변경되었음을 알린다.

function createStore(reducer){
    let state = undefined;
    //구독자 배열
    const subscribers = [];
    
    function subscribe(subscriber){
    	//구독자 등록
    	subscribers.push(subscriber);
        
        //구독 해제
        return unsubscribe(){
            //구독자 자기 자신을 삭제
            subscribers.splice(subscribers.indexOf(subscriber), 1);
        }
    }
    ...
}

 

 

 

dispatch

dispatch는 action을 전달받아 reducer를 통해 상태를 변경시키고 변경사항을 구독자들에게 전달한다.

그리고 다시 action을 반환해 다음 dispatch 함수가 action을 받을 수 있도록 한다.

function createStore(reducer){
    let state = undefined;
    const subscribers = [];
    
    function dispatch(action){
    	//변경된 상태 새로 등록
    	state = reducer(state, action);
        //구독자들에게 전달?
        subscribers.forEach(subscriber => subscriber())
	return action;
    }
    ...
}

 

 

 

---

참조

[Redux] createStore - 구현편 (velog.io)