W jaki sposób reagx redux obiecuje, że oprogramowanie pośrednie wyśle ​​wynikową akcję do wysyłki?

Question

Próbuję dowiedzieć się o middleware dla obietnic przez reagują Redux docs ale nie rozumieją then część poniżej:

const vanillaPromise = store => next => action => { 
    if (typeof action.then !== 'function') { 
    return next(action) 
    } 

    return Promise.resolve(action).then(store.dispatch) 
} 

jaki sposób then poznać wysyłką? Akcja nie została przekazana jako argument, taki jak , więc nie rozumiem, w jaki sposób przesyłka otrzymuje akcję.

Answer 1

Mam nadzieję, że mogę pomóc w tym wyjaśnieniu.

pozwala spojrzeć na to, co znają:

return Promise.resolve(action) 
    .then(function (action) { store.dispatch(action)}) 

zobaczyć tę część:

function (action) { store.dispatch(action)} 

To jest tylko funkcja czeka na przeszły „działanie” mienia.

Teraz, kiedy patrzymy na to, co masz problemy zawijania mózgu wokół to:

return Promise.resolve(action) 
    .then(store.dispatch) // <--- this part 

z „sklep” jest tylko funkcja, i spodziewa się, w tym przypadku argument. Najprawdopodobniej obiekt - tak:

store.dispatch({ type: 'MY_ACTION_TYPE' })} 

teraz, to „może” zawinąć go w zamknięciu, tak jak i to będzie wyglądać znajomo:

.then((action) => { 
    store.dispatch(action) 
}) 

ale czy naprawdę trzeba "zawinąć" go w anonimową funkcję? Niezupełnie, więc możemy po prostu umieścić: store.dispatch, a funkcja "czeka" na przekazanie argumentu ze zwrotu obietnicy. myśleć o tym tak:

gdy badamy funkcję "MultipleByTwo" - ma że znajomy podpis wiedzieć o: (x) => x * 2

gdybyśmy po prostu usunąć nazwę funkcji, jej to samo:

Promise.resolve(5).then((x) => x * 2) 

Uwaga: Widać, że postanowienie (5) -> myśleć o tym resolve.then jak łańcuch, czy „przełączania”. Kiedy "rozwiązamy (5)", przekazujemy tę wartość "5" dalej do ".then". Teraz pamiętajmy, że 5 wartości może być dowolne ... prymitywne, 5 w tym przypadku obiekt {TYP: "WHATEVER"}, funkcja itd ... po prostu się wyłącza .. Jak, "Hej". Then ", tutaj jest moja wartość ....”

resolve(5).then(myfunction) 
     |    ^
     |__>__>__>__>__>_| 

ważne jest, aby zrozumieć, że«myFunction»jest tego przykładem powyżej lub w naszym multiplyByTwo lub nawet, że przykład store.dispatch .. wszystkie są spodziewa argumentem mijania (s).

multiplyByTwo(x) <-- expecting one argument 

lub czynność nie może deklarować go w podpis funkcji, ale to będzie wewnątrz ciała, Ala ..

myFunction() { 
    const args = Array.from(arguments) // we grab the arguments 
} 

lub licząc na dowolnej liczbie argumentów

myOtherFunction(...args) 

Ale tak - te funkcje oczekują jakieś wejście z uchwałą działać dalej. Mogą być przypadki, że nie dbasz o zwróconą wartość, jeśli w ogóle, chcesz mieć kontrolę przepływu ... zrób to "THEN" to ..

Mam nadzieję, że to było pomocne i mam nadzieję, że faktycznie odpowiedział na twoje pytanie. Jeśli nie, daj mi znać.