Redux-アクション

Reduxの公式ドキュメントによると、アクションはストアの唯一の情報源です。アプリケーションからストアに情報のペイロードを運びます。

前に説明したように、アクションはプレーンなJavaScriptオブジェクトであり、実行されるアクションのタイプを示すtype属性が必要です。何が起こったのかを教えてくれます。タイプは、以下に示すように、アプリケーションで文字列定数として定義する必要があります-

const ITEMS_REQUEST = 'ITEMS_REQUEST';

このtype属性とは別に、アクションオブジェクトの構造は完全に開発者次第です。アクションオブジェクトをできるだけ軽くし、必要な情報のみを渡すことをお勧めします。

ストアに変更を加えるには、最初にstore.dispatch（）関数を使用してアクションをディスパッチする必要があります。アクションオブジェクトは次のとおりです-

{ type: GET_ORDER_STATUS , payload: {orderId,userId } }
{ type: GET_WISHLIST_ITEMS, payload: userId }

アクションクリエーター

アクションクリエーターは、アクションオブジェクトの作成プロセスをカプセル化する関数です。これらの関数は、アクションであるプレーンなJsオブジェクトを返すだけです。クリーンなコードの記述を促進し、再利用性の実現に役立ちます。

アクションをディスパッチできるアクションクリエーターについて学びましょう。 ‘ITEMS_REQUEST’製品アイテムリストデータをサーバーから要求します。一方、isLoading 'ITEMS_REQUEST'アクションタイプのレデューサーで状態がtrueになり、アイテムが読み込まれていることを示しますが、サーバーからデータがまだ受信されていません。

当初、isLoading状態は initialState何もロードされていないと仮定したオブジェクト。ブラウザでデータを受信すると、対応するレデューサーの「ITEMS_REQUEST_SUCCESS」アクションタイプでisLoading状態がfalseとして返されます。この状態は、データのリクエストがオンのときにページにローダー/メッセージを表示するためのreactコンポーネントの小道具として使用できます。アクションの作成者は次のとおりです-

const ITEMS_REQUEST = ‘ITEMS_REQUEST’ ;
const ITEMS_REQUEST_SUCCESS = ‘ITEMS_REQUEST_SUCCESS’ ;
export function itemsRequest(bool,startIndex,endIndex) {
   let payload = {
      isLoading: bool,
      startIndex,
      endIndex
   }
   return {
      type: ITEMS_REQUEST,
      payload
   }
}
export function itemsRequestSuccess(bool) {
   return {
      type: ITEMS_REQUEST_SUCCESS,
      isLoading: bool,
   }
}

ディスパッチ関数を呼び出すには、ディスパッチ関数の引数としてアクションを渡す必要があります。

dispatch(itemsRequest(true,1, 20));
dispatch(itemsRequestSuccess(false));

store.dispatch（）を直接使用して、アクションをディスパッチできます。ただし、react-Reduxヘルパーメソッドと呼ばれる方法でアクセスする可能性が高くなりますconnect()。使用することもできますbindActionCreators() 多くのアクションクリエーターをディスパッチ機能でバインドするメソッド。