【React + Redux】非同期処理サンプルコード集：Thunk、Saga、Promiseを駆使してアプリ開発を効率化
Reduxにおけるstore.dispatchの同期性と非同期性
しかし、Reduxで非同期処理を実行する場合もいくつかあります。以下はその例です。
サガを使用した非同期処理
Redux ThunkやRedux Sagaのようなミドルウェアを使用すると、非同期処理を含むアクションを作成することができます。これらのミドルウェアは、アクションを非同期的に処理し、完了後に結果をストアにディスパッチします。
API呼び出し
API呼び出しは非同期処理の典型的な例です。Reduxアクション内でAPIを呼び出す場合、その処理は完了するまで非同期になります。
Promiseを使用した非同期処理
Promiseを使用して非同期処理を実行することもできます。Promiseを返すすべてのアクションは非同期的に処理されます。
- 非同期処理を使用する際には、アクションの状態更新がいつ行われるのかを理解することが重要です。
- 非同期処理を実行する場合、Redux Thunk、Redux Saga、Promiseなどのツールを使用することができます。
store.dispatch自体は同期処理ですが、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_REQUEST':
return { ...state, isFetching: true };
case 'INCREMENT_SUCCESS':
return { ...state, count: state.count + 1, isFetching: false };
case 'INCREMENT_FAILURE':
return { ...state, isFetching: false, error: action.error };
default:
return state;
}
};
const store = createStore(reducer, applyMiddleware(thunk));
const incrementRequest = () => ({ type: 'INCREMENT_REQUEST' });
const incrementSuccess = () => ({ type: 'INCREMENT_SUCCESS' });
const incrementFailure = (error) => ({ type: 'INCREMENT_FAILURE', error });
const increment = () => {
store.dispatch(incrementRequest());
setTimeout(() => {
// API 呼び出しをシミュレート
if (Math.random() < 0.5) {
store.dispatch(incrementSuccess());
} else {
store.dispatch(incrementFailure(new Error('API呼び出しに失敗しました')));
}
}, 1000);
};
store.subscribe(() => {
console.log(store.getState());
});
increment();
このコードでは、incrementアクションがディスパッチされると、非同期処理が開始されます。非同期処理は、1秒後に完了し、成功または失敗の結果をストアにディスパッチします。
import { createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { takeEvery, put, call } from 'redux-saga/effects';
const initialState = { count: 0 };
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
default:
return state;
}
};
const saga = function*() {
yield takeEvery('INCREMENT_REQUEST', function*() {
try {
yield call(incrementAsync);
yield put({ type: 'INCREMENT' });
} catch (error) {
yield put({ type: 'INCREMENT_FAILURE', error });
}
});
};
const incrementAsync = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < 0.5) {
resolve();
} else {
reject(new Error('API呼び出しに失敗しました'));
}
}, 1000);
});
};
const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, sagaMiddleware);
sagaMiddleware.run(saga);
store.dispatch({ type: 'INCREMENT_REQUEST' });
このコードでは、Redux Sagaを使用して非同期処理を管理しています。incrementAsync関数は非同期処理を行い、その結果に基づいてアクションをディスパッチします。
import { createStore } from 'redux';
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);
store.dispatch(async () => {
try {
await incrementAsync();
store.dispatch({ type: 'INCREMENT' });
} catch (error) {
console.error(error);
}
});
const incrementAsync = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < 0.5) {
resolve();
} else {
reject(new Error('API呼び出しに失敗しました'));
}
}, 1000);
});
};
Redux ThunkやRedux Sagaのような既存のミドルウェアを使用する代わりに、カスタムミドルウェアを作成することもできます。カスタムミドルウェアを使用すると、非同期処理を処理する独自のロジックを実装することができます。
rxjs
rxjsのようなライブラリを使用して、非同期処理を管理することもできます。rxjsは、Reactive Streams APIを実装するJavaScriptライブラリであり、Observableを使用して非同期データストリームを処理することができます。
MobX
MobXは、状態管理のための別のJavaScriptライブラリです。MobXは、自動的に状態更新を検出してビューを更新するObservableを使用して、非同期処理を処理することができます。
Redux以外の状態管理ライブラリ
Redux以外にも、状態管理のための様々なライブラリがあります。これらのライブラリの中には、非同期処理を処理するための独自の機能を提供するものがあります。
どの方法を選択すべきか？
どの方法を選択するかは、プロジェクトの要件によって異なります。以下は、各方法を選択する際の考慮事項です。
- コミュニティ: MobXは、Reduxよりも小さなコミュニティを持っていますが、活発で成長しています。
- テストの容易さ: Redux Sagaは、テストしやすいように設計されています。
- 柔軟性: カスタムミドルウェアやrxjsを使用すると、より柔軟な非同期処理ロジックを実装することができます。
- シンプルさ: Redux Thunkは、Reduxで非同期処理を実行する最も簡単な方法です。
javascript reactjs redux
