Redux - działania

Akcje są jedynym źródłem informacji dla sklepu zgodnie z oficjalną dokumentacją Redux. Przenosi ładunek informacji z aplikacji do przechowywania.

Jak wspomniano wcześniej, akcje to zwykły obiekt JavaScript, który musi mieć atrybut type, aby wskazać typ wykonywanej akcji. Mówi nam, co się stało. Typy należy definiować jako stałe łańcuchowe w aplikacji, jak podano poniżej -

const ITEMS_REQUEST = 'ITEMS_REQUEST';

Oprócz tego atrybutu typu, struktura obiektu akcji zależy całkowicie od programisty. Zaleca się, aby obiekt akcji był jak najlżejszy i przekazywał tylko niezbędne informacje.

Aby spowodować jakąkolwiek zmianę w sklepie, musisz najpierw wysłać akcję za pomocą funkcji store.dispatch (). Obiekt akcji jest następujący -

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

Twórcy akcji

Twórcy akcji to funkcje, które hermetyzują proces tworzenia obiektu akcji. Te funkcje po prostu zwracają zwykły obiekt Js, który jest akcją. Promuje pisanie czystego kodu i pomaga osiągnąć wielokrotne użycie.

Pozwól nam dowiedzieć się o kreatorze akcji, który pozwala wysłać akcję, ‘ITEMS_REQUEST’żąda z serwera danych listy pozycji produktów. W międzyczasieisLoading stan jest ustawiony jako true w reduktorze w typie akcji „ITEMS_REQUEST”, aby wskazać, że elementy są ładowane, a dane nadal nie są odbierane z serwera.

Początkowo stan isLoading był false w pliku initialStateobiekt przy założeniu, że nic się nie ładuje. Gdy dane są odbierane w przeglądarce, stan isLoading zostanie zwrócony jako false w typie akcji „ITEMS_REQUEST_SUCCESS” w odpowiednim reduktorze. Ten stan może być użyty jako rekwizyt w komponentach reagujących, aby wyświetlić moduł ładujący / wiadomość na twojej stronie, gdy żądanie danych jest włączone. Kreator akcji jest następujący -

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,
   }
}

Aby wywołać funkcję wysyłającą, musisz przekazać akcję jako argument do funkcji wysyłającej.

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

Możesz wysłać akcję bezpośrednio za pomocą metody store.dispatch (). Jednak bardziej prawdopodobne jest, że uzyskasz do niego dostęp za pomocą metody pomocniczej React-Redux o nazwieconnect(). Możesz także użyćbindActionCreators() metoda powiązania wielu twórców akcji z funkcją wysyłania.