reduce()의 힘 - 순차적으로 약속 대기

예 감소, 전능자, 인간들 사이에서 두려워...

그러나 진지하게 많은 신입 개발자와 숙련된 개발자 모두 이 문제를 이해하려고 하지 않으며 저에게 묻는다면 그럴만한 이유가 없습니다.

아직 이해가 되지 않는다면 this site을 추천합니다. 여기에는 확실히 시작할 수 있는 몇 가지 훌륭한 예가 있습니다.


이제 문제가 해결되었으니 reduce의 진정한 힘에 대해 이야기해 봅시다 🔥⚡️🔥⚡️🔥

array.reduce( async (previousPromise, item) => {
  await previousPromise;

  return methodThatReturnsAPromise(item);
}, Promise.resolve());

분석해 보겠습니다.

먼저 누산기를 Promise.resolve()로 초기화하여 주어진 값(전달된 인수)으로 해결되는 Promise를 반환합니다. 우리의 경우에는 - undefined이지만 신경 쓰지 않습니다. 약속의 힘만을 원합니다.

누산기를 기다리면서 루프를 시작하고(첫 번째 반복 후에 이해가 될 것입니다) 그 후에 또 다른 약속을 반환합니다!

이제 누산기는 배열의 첫 번째 요소를 인수로 사용하여 methodThatReturnsAPromise와 같습니다.

그리고 이제 주기가 계속됩니다... 누산기를 기다린 다음 다음 약속과 동일하게 만듭니다.

모든 약속은 차례로 일어날 것입니다.
다음 약속은 실행되기 전에 이전 약속이 완료될 때까지 기다립니다.

Apromise는 시스템에 과부하가 걸리지 않도록 하나씩 수행하려는fetch API call 수 있습니다.

즉, 우리는 reduce의 진정한 힘을 활용했습니다!
이제 Promise를 순차적으로 대기할 수 있습니다 🔥

자세한 설명을 보려면 css-tricks을 방문하십시오.

보너스: reduceRight()

reduce() 와 같은 방식으로 작동합니다. 그러나 반대 방향으로 작동합니다.

reduce() starts at the first element and travels towards the last. Oppositely, reduceRight() starts at the last element and goes to the first element.

너무 많은 컨텍스트 제공자가 ReactApp.js에 스팸을 보내는 것을 방지하기 위해 지금까지 본 유일한 사용 사례입니다.
(들여쓰기 지옥)

<BrowserRouter>
    <AuthProvider>
        <ThemeProvider>
            <ChatProvider>
                <App />
            </ChatProvider>
        </ThemeProvider>
    </AuthProvider>
</BrowserRouter>

여전히 동일한 순서를 유지하면서 이를 해결하는 방법(reduce를 사용한 멋진 방법)은 reduceRight()를 사용하는 것입니다.

export default function Compose(props: Props) {
    const { components = [], children } = props

    return (
        <>
            {components.reduceRight((acc, Comp) => {
                return <Comp>{acc}</Comp>
            }, children)}
        </>
    )
}

그리고 다음과 같이 사용할 수 있습니다.

<Compose components={[BrowserRouter, AuthProvider, ThemeProvider, ChatProvider]}>
    <App />
</Compose>

저에게 처음 소개해준 stackoverflowquestion입니다.

언제나처럼 읽어주셔서 감사합니다! 🙏🏼🦾