Reducerにおけるサーバからの返り値の処理 with Redux

Question

一般的な設計がよくわかっていないのですが、下記のReducerで、ステートを更新して返却しようとしています。サーバから返却されたログイン情報をステートに設定して処理を継続しようとしています。
但し、サーバとは非同期処理を行っているので、Reducerがステートを返却しないというエラーとなります。やはり、設計的にサーバ処理は別の場所で行う方が良いのでしょうか？

export function sampleReducer(state = initData, action){
    console.log(action.type)
    switch (action.type) {
        case 'LOGIN':
            return login(state, action);
        default:
            return state;
    }
}

function login(state, action){
    let email = action.params.email;
    let passwd = action.params.passwd;
    axios.get('/api/member/login/' + email + '/' + passwd)
        .then(function (response) {
            // handle success
            console.log(response.data);
            let data = response.data;
            return {
                members: data.data,
                authenticated: true
            };
            state.dispatch({type:});
        })
        .catch(function (error) {
            // handle error
            console.log(error);
            return {
                authenticated: false
            };
        })
        .finally(function () {
            // always executed
        });
}

アドバイスの程、よろしくおねがいします。

Answer 1

こんにちは

すでにベストアンサーを決められた後で失礼します。

React＋Reduxの組み合わせの中で、API呼び出しによる結果からreduxアクションをdispatchしてstateに反映させる際に、

• redux-thunk

または

• redux-saga

がよく使われます。ともにQiitaに関連記事がいくつか見つかります。

手前味噌になりますが、以下は redux-sage と react-router を使ったサンプル記事です。

• Qiita Reactサンプル：redux-sagaとreact-router v4でWebAPIの結果に応じて画面遷移させる。（前編）、(後編)

上記は投稿から一年以上が経ち、少し内容が古くなっていますが、斜め読みして頂ければ、redux-sage が何をやってくれるかが、ざっと分かるかと思います。

参考になれば幸いです。

Answer 2

Reducerで非同期通信を行うのではなく、Component側で非同期通信を行い、thenでactionをdispatchしてみてはいかがでしょう。