react-reduxとreact-actionsを使った非同期処理の実現方法

Question

前提・実現したいこと

react-reduxとredux-actionsを使った非同期処理について質問です。

superagentのget通信で得たデータをredux-actionsのcreateAction()という機能を使ってreducer側にデータを渡したい。

前提：
・非同期処理を許可するためmiddlewareの許可をするためのredux-thunkを利用
・reducerはcombinereducerで結合済み

発生している問題・エラーメッセージ

下記component/todoでdispatch後
action/index.jsにある処理までは動くが
createActionの処理が動いても
reducer/taskの中にあるhandleactionの[test]の所に処理が動いてくれない

該当のソースコード

action/index.js
-------------------------------------------------------
//import系は省略
export function test(){
    return async () => {
        console.log('return asyncに入りました。');
        const response = await request.get(root)
        const res = response.body.message;
//get通信のデータは正しく取得できています。
        console.log('responseのなかみ'+response.body.message);
        createAction('TEST', (message) => ({message:message = res}));
    }
};


reducer/task
-------------------------------------------------------
//import系は省略
const initialState = {//関係のないものは省略しています。
    Test: [{
        message:'default'
    }],
}


const task = handleActions(//これが動いて欲しい
    [test]:(state, action) => (console.log('reducerのtestが動いた'),{
        Test: [
            state.Test,
            {
                message : action.payload.message
            }
        ]
}),
},initialState);
export default task;

//Route <Providerで全体に共有しているコンポーネント
-------------------------------------------------------
//import系は省略
//middleware許可　及びstoreの共有
let store  = createStore(rootReducer,applyMiddleware(thunk));

export default class RouteLinks extends Component{
    render() {
        return(
            <div>
                <Provider store={store}>
                    <Router>
                        <Switch>
                            <Route exact path="/" component={SelectionPage} />
                            <Route exact path="/todo" component={Task} />
                            <Route exact path="/category" component={Category} />
                        </Switch>
                    </Router>
                </Provider>
            </div>
        )
    }
}

component/todo dispatchを発火させるところ

//抜粋
            <form onSubmit={(e) => {
                e.preventDefault();
                dispatch(test());
略...

試したこと

actionの中でexport const test = createAction(~~)と書くとreducerの所まで処理がしっかりと動く
しかしconst test~ではasyncなどの処理が入れれないためfunction〜と書いている。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[hoshi-takanori]

redux-actions は開発が滞っているようですが、どうしても使いたいですか？
https://github.com/redux-utilities/redux-actions

素直に Redux Toolkit を使った方が良いのでは…。
https://future-architect.github.io/articles/20200501/

[kuukun]

hoshi-takanoriさん
今回はいろいろ事情があり、redux-actionsで実施する必要があります。

[hoshi-takanori]

なるほど。redux-thunk-actions 　なんてのもあるみたいですね。
https://github.com/machadogj/redux-thunk-actions

[anozon]

[test]:(state, action) => (console.log('reducerのtestが動いた'),{`
ここの [test] の test 変数にはちゃんと "TEST" がはいっていますか？

[kuukun]

こちらのconsole.log('reducerのtestが動いた')については動作確認をする時に目印として入れていたもので、そもそもこちらのテストreducerには処理が走っていません。

Answer 1

export function hogehoge(e) {
const hogehoge = 'http://127.0.0.1:8000/xxx'
return async (dispatch) => {
try{
const ID = {id:e}
await request.post(hogehoge).send(ID).end(function(err,res){
dispatch(fetchmount());
})
}catch{
console.log('通信エラーです');
}
}
}