JavaScriptにおける非同期処理。Promise&async/await

非同期処理とは・・・実行完了を待たない。並行して次の処理を行う。

Promiseで実行完了を待つ

Promiseの状態には以下の3つがあります。

1. pendeing:初期状態
2. fulfilled:処理が成功して完了した状態
3. rejected:処理が失敗して完了した状態

以下の場合、resolveかrejectが返ってくるまでPromiseFuncは次に進まなくなります。

const PromiseFunc = () => {
    return new Promise((resolve, reject) => {
        someAsynchronousunc(() => {
            //何かしらの非同期処理
        }).then(() => {
            //非同期処理が成功した場合
            return resolve("成功")
        }).catch(() => {
            //非同期処理が失敗した場合
            return reject("失敗")
        })
    })
}

async/awaitで実行完了を待つ

promiseよりシンプル

• 非同期処理に伴う関数定義にasyncを付ける
• 非同期処理を伴う関数実行時にawaitを付ける
• awaitはasync付き関数内でしか使えない

以下の場合、someAsynchronousFuncがreturnされるまでasyncAwaitFuncは次に進まなくなります。

const asyncAwaitFunc = async () => {
    const hoge = await someAsynchronousFunc(() => {
            //何かしらの非同期処理
        }).then(() => {
            //非同期処理が成功した場合
            return "成功"
        }).catch(() => {
            //非同期処理が失敗した場合
            return "失敗"
        })
}

Reduxにおけるconnectを理解する

connect()の引数

connectの呼び出し方はmapStateToPropsとmapDispatchToPropsという2つの関数を引数に取ります。

それぞれ以下の役割がある

データ型	用途
mapStateToProps	storeが持っているstateをpropsに入れて子コンポーネントに渡す
mapDispatchToProps	dispatchを呼び出す関数をpropsに入れて子コンポーネントに渡す

以下のコードの場合、mapStateToPropsにはcreateStore()の引数である、reducerで新しく作られたstateをpropsに入れてあげてコンポーネントに渡しています。

mapDispatchToPropsにはaction関数をpropsに入れてあげてコンポーネントに渡しています。

const mapStateToProps = state => ({ events: state.events })

const mapDispatchToProps = ({ readEvents })

export default connect (mapStateToProps, mapDispatchToProps)(EventsIndex);

まとめ

本来なら親などから引き継いでもらったり、繋いでもらったりしないといけないところ、「mapStateToProps」と「mapDispatchToProps」を使うことでそんなことは一切なしで、使いたいコンポーネントからすぐにPropsとして使うことができる。