redux-thunk vs redux-promise：Reduxで非同期処理を行うミドルウェアの比較
2024-07-27
Reduxで非同期処理にミドルウェアが必要な理由
非同期処理とは？
非同期処理とは、プログラムの実行が一時的に停止し、別の処理が実行される処理のことです。例えば、APIリクエストやファイル読み込みなどが非同期処理に該当します。
Reduxにおける非同期処理の問題
Reduxは同期処理を前提として設計されているため、非同期処理を直接扱うにはいくつかの問題があります。
- Actionの複雑化: 非同期処理をAction内で記述すると、コードが複雑になり、読みづらくなります。
- 副作用の発生: 非同期処理は副作用（Action以外で状態を変化させること）が発生しやすく、状態管理が複雑になります。
- テストの難しさ: 非同期処理を含むコードはテストが難しく、バグが発生しやすくなります。
ミドルウェアによる解決
ミドルウェアは、Reduxのdispatch()メソッドを拡張し、非同期処理を簡単に扱えるようにするライブラリです。代表的なミドルウェアには、redux-thunkやredux-promiseなどがあります。
ミドルウェアを使うことで、以下のメリットを得られます。
- Actionの簡潔化: 非同期処理をAction Creator内で記述し、Actionはシンプルなオブジェクトとして保持できます。
- 副作用の抑制: ミドルウェア内で非同期処理を管理することで、副作用を発生させずに状態管理を行うことができます。
- テストの容易化: ミドルウェアが非同期処理を抽象化することで、テストコードが書きやすくなります。
ミドルウェアの具体的な使い方
ミドルウェアの使い方としては、以下のような流れになります。
- ミドルウェアをインストールする。
- createStore()関数にミドルウェアを渡す。
- Action Creator内で、ミドルウェアが提供する関数を使って非同期処理を行う。
Reduxで非同期処理を行う場合は、ミドルウェアを使うことで、コードの簡潔化、副作用の抑制、テストの容易化などのメリットを得られます。
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const initialState = {
count: 0,
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
...state,
count: state.count + 1,
};
default:
return state;
}
};
const store = createStore(
reducer,
applyMiddleware(thunk),
);
const incrementAsync = () => (dispatch) => {
setTimeout(() => {
dispatch({
type: 'INCREMENT',
});
}, 1000);
};
store.dispatch(incrementAsync());
import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
const initialState = {
count: 0,
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
...state,
count: state.count + 1,
};
default:
return state;
}
};
const store = createStore(
reducer,
applyMiddleware(promiseMiddleware),
);
const incrementAsync = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
type: 'INCREMENT',
});
}, 1000);
});
};
store.dispatch(incrementAsync());
Redux-saga
Redux-sagaは、非同期処理を管理するためのジェネレータベースのライブラリです。ミドルウェアよりも複雑な処理を記述できますが、学習コストも高くなります。
サガの例
import { takeEvery, put } from 'redux-saga/effects';
function* incrementAsync() {
yield takeEvery('INCREMENT_ASYNC', function* () {
yield delay(1000);
yield put({ type: 'INCREMENT' });
});
}
export default incrementAsync;
Observable
Observableは、非同期処理をストリームとして扱うためのライブラリです。Reduxと組み合わせて使うことで、非同期処理をより簡単に記述できます。
import { Observable } from 'rxjs';
const incrementAsync = () => {
return Observable.create((observer) => {
setTimeout(() => {
observer.next({ type: 'INCREMENT' });
observer.complete();
}, 1000);
});
};
store.dispatch(incrementAsync());
ミドルウェア以外にも、Reduxで非同期処理を行う方法はいくつかあります。
javascript asynchronous reactjs
