Redux - 動作 (Actions)

上一頁
下一頁

根據 Redux 官方文件，動作是儲存的唯一資訊來源。它承載著應用程式到儲存的資訊負載。

如前所述，動作是簡單的 JavaScript 物件，必須具有 type 屬性以指示執行的動作型別。它告訴我們發生了什麼。型別應在您的應用程式中定義為字串常量，如下所示：

const ITEMS_REQUEST = 'ITEMS_REQUEST';

除了這個 type 屬性外，動作物件的結構完全取決於開發者。建議儘可能使您的動作物件輕量級，只傳遞必要的資訊。

要使儲存發生任何更改，您需要首先使用 store.dispatch() 函式分派一個動作。動作物件如下所示：

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

動作建立器 (Actions Creators)

動作建立器是封裝動作物件建立過程的函式。這些函式簡單地返回一個簡單的 Js 物件，即一個動作。它促進了編寫乾淨的程式碼並有助於實現可重用性。

讓我們瞭解一下動作建立器，它允許您分派一個動作 `'ITEMS_REQUEST'`，該動作請求從伺服器請求產品專案列表資料。同時，在 `'ITEMS_REQUEST'` 動作型別中，reducer 中的 `isLoading` 狀態設定為 true，以指示專案正在載入，並且尚未從伺服器接收資料。

最初，在 `initialState` 物件中，`isLoading` 狀態為 false，假設沒有任何內容正在載入。當瀏覽器接收到資料時，在相應的 reducer 中的 `'ITEMS_REQUEST_SUCCESS'` 動作型別中，`isLoading` 狀態將返回 false。此狀態可用作 React 元件中的 prop，以便在請求資料期間在您的頁面上顯示載入程式/訊息。動作建立器如下所示：

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 函式，您需要將 action 作為引數傳遞給 dispatch 函式。

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

您可以直接使用 store.dispatch() 分派動作。但是，您更有可能使用名為 `connect()` 的 react-Redux 輔助方法訪問它。您還可以使用 `bindActionCreators()` 方法將多個動作建立器與 dispatch 函式繫結。

列印頁面
上一頁
下一頁
廣告