[클로저][JS]스토어 구현

만약에 솔루션 함수를 연속으로 실행 했을때 api요청을 지속적으로 실행하는 경우로 솔루션함수가 중복 실행되고. 그리고 내부에서 api요청을 보내며 api요청시 첫 요청은 그냥 보내고, 이후 요청시에는 저장된 token값을 반드시 포함해서 요청을 해야한다. 이런 요구 사항의 경우 간단히 구현하면 아래와 같은 모습으로 구현 가능하다. 

function CreateStore() {
    const store = {};
    return {
        getState(key) {
            return store[key];
        },
        dispatch(key, value) {
            store[key] = value;
        }
    };
}
const tokenStore = CreateStore();

function solution() {
    function callapi() {
        if (tokenStore.getState("token")) {
            tokenStore.dispatch("token","두번째token");
            return "result2";
        } else {
            tokenStore.dispatch("token", "초기token");
            return "result";
        }
    }

    return callapi();
}

console.log(solution(), solution()); // result, result2

해당 코드는 클로저를 사용해서 캡슐화한 코드이기는 하나 solution 함수 스코프을 벗어난 tokenStore와 createStore 라는 전역오염이 발생한다. 사실 그냥 전역에 변수 하나를 선언한거랑 별차이가 없다는 거 때문에 어떻게 해야지 solution 함수가 중복 실행될때 solution내부의 렉시컬스코프를 저장 할 수 있을까를 생각해보는데 사실 딱히 답이 안나온다.. 어떻게 개선해야할까?

 

같은 함수를 중복 실행하면서 내부 컨텍스트를 유지하는건 아무리 생각해도 답이 없는거 같다. 이런식으로 하는 수 밖에 모르겠다.

const solution = (function () {// 변수에 담는다.
    const tokenStore = CreateStore();

    function callapi(t) {
        if (tokenStore.getState("token")) {
            tokenStore.dispatch("token", "두번째token");
            return "result2" + t;
        } else {
            tokenStore.dispatch("token", "초기token");
            return "result" + t;
        }
    }

    return callapi;

    function CreateStore() {
        const store = {};
        return {
            getState(key) {
                return store[key];
            },
            dispatch(key, value) {
                store[key] = value;
            }
        };
    }
})();

console.log(solution("api"), solution("api2")); // resultapi, result2api2