Reduxアクションとは何ですか？どのように派遣しますか？-フロントエンドQ&A-php.cn

Reduxアクションとは何ですか？どのように派遣しますか？

百草

リリース： 2025-03-21 18:21:04

オリジナル

630 人が閲覧しました

Reduxアクションとは何ですか？どのように派遣しますか？

Reduxアクションは、アプリケーションの状態を変更する意図を表す単純なJavaScriptオブジェクトです。それらは、Reduxストアで変更をトリガーする唯一の方法として機能します。通常、アクションには、実行されるアクションのタイプを示すtypeフィールドと、他の関連データ（多くの場合、 payloadと呼ばれる）が含まれます。

アクションを派遣するには、Reduxストアが提供するdispatch関数を使用します。プロセスは、次の手順に分類できます。

アクションを作成します。適切なtypeと必要なpayloadを使用してアクションオブジェクトを作成します。
アクションを発送します：アクションオブジェクトを渡すdispatch関数を呼び出します。これにより、アクションがReduxストアに送信され、その後、還元剤を通過して状態を更新します。

これが基本的な例です。

 <code class="javascript">// Action Creator function incrementCounter() { return { type: 'INCREMENT_COUNTER', payload: 1 }; } // Dispatching the action store.dispatch(incrementCounter());</code>

ログイン後にコピー

この例では、 incrementCounterアクションオブジェクトを返すアクション作成者です。アクションは、 store.dispatchを使用してストアに派遣されます。

Reduxアクションの構造は何ですか？

Reduxアクションの構造は簡単ですが、理解することが重要です。典型的なReduxアクションオブジェクトには、次の構造があります。

タイプ：（必須）アクションを説明する文字列。タイプミスを回避し、コードをより保守しやすくするために、アクションタイプに大文字定数を使用することは慣習です。
ペイロード：（オプション）アクションに必要な追加データ。州の更新に必要なデータを伝えるためによく使用されます。
エラー：（オプション）アクションがエラーを表すかどうかを示すブール波。
メタ：（オプション）ペイロードの一部ではないアクションに関する追加情報。

典型的なアクション構造の例は次のとおりです。

 <code class="javascript">{ type: 'ADD_TODO', payload: { id: 1, text: 'Learn Redux' }, error: false, meta: { timestamp: new Date().getTime() } }</code>

ログイン後にコピー

Redux Thunkを使用して非同期アクションを派遣するにはどうすればよいですか？

Redux Thunkは、アクションオブジェクトの代わりに関数を返すアクション作成者を作成できるミドルウェアです。これらの関数は、非同期API呼び出しを行うなど、副作用を伴う場合があり、時間の経過とともに複数のアクションを発送できます。

Redux Thunkを使用して非同期アクションを派遣する方法は次のとおりです。

Redux Thunkのインストール：まず、Redux Thunkをインストールする必要があります。
```
 <code class="bash">npm install redux-thunk</code>
```
ログイン後にコピー

Redux Thunkをセットアップ：ストアのミドルウェアにReduxサンクを含めます。

 <code class="javascript">import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const store = createStore(rootReducer, applyMiddleware(thunk));</code>

ログイン後にコピー

Async Action Creatorを作成：関数を返すアクション作成者を作成します。この関数は、アクションを発送し、 setTimeout 、 fetch 、またはその他の非同期操作を使用できます。

 <code class="javascript">function fetchTodos() { return async (dispatch) => { dispatch({ type: 'FETCH_TODOS_REQUEST' }); try { const response = await fetch('https://example.com/api/todos'); const data = await response.json(); dispatch({ type: 'FETCH_TODOS_SUCCESS', payload: data }); } catch (error) { dispatch({ type: 'FETCH_TODOS_FAILURE', error: error.message }); } }; }</code>

ログイン後にコピー

Asyncアクションを派遣します：通常のアクションのように非同期アクションを派遣できるようになりました。
```
 <code class="javascript">store.dispatch(fetchTodos());</code>
```
ログイン後にコピー

この例では、 fetchTodos非同期操作のさまざまな段階で異なるアクションを派遣する非同期アクション作成者です。

Reduxでアクションタイプを管理するためのベストプラクティスは何ですか？

Reduxのアクションタイプを効果的に管理することは、スケーラブルで保守可能なアプリケーションを維持するために重要です。ここにいくつかのベストプラクティスがあります：

アクションタイプに定数を使用します：アクションタイプを別のファイルの定数として定義します。これにより、タイプミスを防ぎ、アプリケーション全体でアクションタイプの維持が容易になります。
```
 <code class="javascript">// actionTypes.js export const INCREMENT_COUNTER = 'INCREMENT_COUNTER'; export const DECREMENT_COUNTER = 'DECREMENT_COUNTER';</code>
```
ログイン後にコピー

ドメインごとにアクションタイプを整理します：属するドメインごとのグループアクションタイプ。これは、多数のアクションタイプの管理に役立ちます。

 <code class="javascript">// counterActionTypes.js export const INCREMENT_COUNTER = 'INCREMENT_COUNTER'; export const DECREMENT_COUNTER = 'DECREMENT_COUNTER'; // userActionTypes.js export const LOGIN_USER = 'LOGIN_USER'; export const LOGOUT_USER = 'LOGOUT_USER';</code>

ログイン後にコピー

アクション作成者を使用：アクションクリエイターを使用してアクションを生成します。これにより、エラーの可能性が減り、コードがより再利用可能になります。
```
 <code class="javascript">// actions.js import { INCREMENT_COUNTER } from './actionTypes'; export function incrementCounter() { return { type: INCREMENT_COUNTER, payload: 1 }; }</code>
```
ログイン後にコピー
命名規則に従ってください：アクションタイプには一貫した命名規則を使用します。一般的な慣行は、大文字のsnake_caseを使用することです。
重複するアクションタイプを避けてください。意図しない動作を避けるために、アクションタイプが一意であることを確認してください。複数の還元剤がある場合は、アクションタイプが明確であることを確認するか、名前空間を使用してください。
アクションペイロードを慎重に使用する：アクションのペイロードを無駄のない状態に保ち、状態を更新するために必要なものに焦点を合わせてください。ペイロードに不要なデータを含めることは避けてください。
フラックス標準アクション（FSA）の使用を検討してください。一貫性と予測可能性のために、フラックス標準アクションフォーマットに従ってください。 FSAは、アクションにtypeフィールドが必要であり、 payload 、 error 、またはmetaフィールドがあることを指定します。