Redux-アクション

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

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

const ITEMS_REQUEST = 'ITEMS_REQUEST';

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

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

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

アクションクリエーター

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

サーバーからの商品アイテムリストデータを要求するアクション「* ITEMS_REQUEST」をディスパッチできるアクション作成者について学びましょう。一方、「ITEMS_REQUEST」アクションタイプのリデューサーで *isLoading 状態がtrueになり、アイテムがロードされていることを示し、データはまだサーバーから受信されていません。

最初は、 initialState オブジェクトのisLoading状態はfalseで、何もロードされていないと仮定しました。ブラウザでデータを受信すると、対応するリデューサーの「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（）を直接使用して、アクションをディスパッチできます。ただし、* connect（）*と呼ばれるreact-Reduxヘルパーメソッドを使用してアクセスする可能性が高くなります。 * bindActionCreators（）*メソッドを使用して、多くのアクションクリエーターをディスパッチ関数にバインドすることもできます。

Redux-actions

Redux-アクション

アクションクリエーター