redux-thunkはReduxのミドルウェアで、アクションクリエーター内の非同期操作を簡単に処理できるようにします。このライブラリを使用すると、アクションクリエーターはアクションの代わりに関数を返すことができ、この関数は必要な非同期ロジックを実行し、準備ができたらアクションをディスパッチできます。
📄 HTML
<div id='example'>
<p>Loading...</p>
</div>
🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.3.0/redux-thunk.min.js"></script>
⚙️ JavaScript
function fetchData() {
return function(dispatch) {
setTimeout(() => {
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: 'Hello from Redux Thunk!' });
}, 1000);
};
}
function reducer(state = { message: '' }, action) {
switch (action.type) {
case 'FETCH_DATA_SUCCESS':
return { ...state, message: action.payload };
default:
return state;
}
}
const store = Redux.createStore(reducer, Redux.applyMiddleware(ReduxThunk.default));
store.subscribe(() => {
const state = store.getState();
document.getElementById('example').innerHTML = '<p>' + state.message + '</p>';
});
store.dispatch(fetchData());
Reduxの状態管理をReactアプリケーションに統合する公式バインディングを提供します。
Reduxは、アプリケーションの状態を予測可能な方法で管理・維持するためのJavaScriptライブラリです。Fluxアーキテクチャパターンに基づいており、アプリケーション全体でアクセスできるグローバル状態コンテナを提供します。
2つのテキストの違いを一目で確認できます。
簡単かつ迅速にファビコンを生成します。
デザイン用のダミーテキストを生成します。
文字数と単語数をリアルタイムで確認できます。
字幕形式を簡単に変換できます。
画像内のテキストを自動で抽出します。