ES6 약속 - 지연을 사용하지 않고 React componentDidMount 함수 중에 인스턴스화 된 객체에 대한 최종 액세스를 어떻게 보장 할 수 있습니까?

Question

미리 감사드립니다.

나는 (과거에 내가 Q 또는 각도의 $ Q 서비스 사용했습니다) 처음 ES6 기본 약속을 사용하고 있습니다. 나는 연기 된 것을 사용함으로써 쉽게 해결할 수있는 문제가 있으며, ES6 약속이 그것을 사용하지 않는다는 것을 발견하면 놀랐습니다.

나는 안티 패턴으로 연기의 사용을 참조 블로그에 많은 사람들을 발견하고 더욱 놀랐다. 그들의 사용을 비판하는 몇 개의 블로그를 읽은 후에도, 나는 아직도 왜 그 이유를 이해하지 못한다 - 그들의 예는 내가 처음으로 연기하기를 결코 사용하지 않았던 장소 였고 어쩌면 나는 뭔가를 놓쳤다. (그리고 설명을 신경 쓰지 않을 것이다. 왜 그들이 나쁜쪽으로 나쁜지). 그러나 베스트 프랙티스의 한계에 머무르기 위해, 나는 그들을 지원하는 라이브러리를 사용하지 않고 무언가를 해결하는 방법을 알아 내려고 노력하고 있습니다.

내 반작용/돌아 오는 응용 프로그램에서지도를 만들 수 OpenLayers 라이브러리를 사용하고 있습니다. OpenLayers는 맵 객체가 생성 될 때 DOM 요소를 사용하여 맵을 배치해야합니다. 따라서 구성 요소가 탑재 될 때까지 OpenLayers 맵을 인스턴스화 할 수 없습니다. 괜찮습니다. componentDidMount를 통해 라이프 사이클 후크가 있습니다. 내가 문제로 실행

내가 다른 클래스에 해당 맵 오브젝트를 노출 할 필요가 그 클래스는 맵이 생성 될 때까지 실행 기다릴 필요가 코드를 가지고있다. A는 연기와 함께 아래와 같이

, 나는 매우 간단하게이 문제를 해결할 수 :

const deferred = Q.defer(); 

const Foo = React.createClass({ 
    componentDidMount() { 
    const map = new ol.Map(...); 
    deferred.resolve(map); 
    } 
    ... 
} 

export getMap => deferred.promise 

는 그러나 ES6의 약속, 내가 붙어있어. 즉시 해고 때문에

은 내가 componentDidMount 클래스의 외부 약속을 인스턴스화 할 수 없습니다.

componentDidMount 함수의 범위 내에서 약속을 인스턴스화하거나 내 코드가 동기이므로 Promise.resolve를 사용하면 약속이 getMap 함수의 범위를 벗어납니다.

약속 개체를 componentDidMount의 범위를 벗어나 선언하지만 인스턴스화하지 않으면 getMap은 componentDidMount가 실행될 때까지 undefined를 반환하여 처음에는 약속이있는 지점을 무효화합니다.

OpenLayers지도가 매우 가변적이며 자체 작업을 수행하기 때문에 Redux 상태로지도를 넣지는 않을 것입니다. 거기에지도를 넣으면 불변성에 대한 Redux 약속이 깨질 것입니다. 나는 Redux 솔루션을 포기했다. "mapAvailable"과 같은 Redux 상태에서 부울을 던지면 해킹 된 것처럼 느껴집니다. 아마 그 일을 할 수는 있지만 여러 가지 이차적 인 문제를 야기 할 수 있습니다.

그래서 나는 무엇을 놓치고 있습니까? 지연이 실제로 올바른 대답 인 코너 케이스에 있습니까? 아니면 확실하지 않은 것입니까?

는 다시, 시간 내 주셔서 감사합니다.

Answer 1

블로그에서 많은 사람들이 안티 패턴으로 연기되는 사용법을 언급하는 것에 대해 놀랐습니다.

당신은 deferreds의 특정 사용에 대한 인, 여기에 deferred antipattern를 참조 할 것 - 그것은 deferreds는 안티 패턴 있다는 말을하지 않습니다.

deferreds are deprecated 그럼에도 불구하고 :-) 지연 개체가 필요하지 않으므로 resolve 함수 만 있으면 충분합니다.

componentDidMount 클래스 외부에서 약속을 인스턴스화 할 수 없으므로 즉시 적용됩니다.

왜 즉시 발사합니까? 그냥하지 마. 당신은 클래스 주위를 감싸도 수 :

는

export const promise = new Promise(resolve => { 
    const Foo = React.createClass({ 
    componentDidMount() { 
     const map = new ol.Map(…); 
     resolve(map); 
    } 
    … 
    } 
    … // do something with Foo here 
}); 

그러나이 끔찍한 패턴임을 코스 통지

let resolve; 
export const promise = new Promise(r => { 
    resolve = r; 
}); 
export const Foo = React.createClass({ 
    componentDidMount() { 
    const map = new ol.Map(…); 
    resolve(map); 
    } 
    … 
} 

싶지 것 가능성 - 당신 그냥 글로벌을 만든 , 정적 약속, 기본적으로 싱글 톤. Foo 구성 요소 중 개 중 하나라도 설치하면 문제가 해결됩니다. 그러지 마. 당신이 필요로하는 것이 정확히 무엇인지 확신 할 수는 없지만, 컴포넌트의 생성자에 약속을하는 것을 추천합니다.

Answer 2

지연이 잘 작동하지만 더 이상 사용되지 않아 지연 패턴 방지 패턴을 사용하는 블로그를 찾는 이유가 있습니다.

지연이 더 이상 사용되지 않았 음을 자세히 알 수있는 this link을 살펴볼 수 있습니다.

나는 동일한 해결책을 mapAvailable과 같다고 생각하며 해킹에 동의합니다. 이 상황에 대해 더 나은 해결책을 찾으면 알려주십시오.