Redux - Действия

Действия - единственный источник информации для магазина согласно официальной документации Redux. Он передает полезную информацию из вашего приложения в хранилище.

Как обсуждалось ранее, действия представляют собой простой объект JavaScript, который должен иметь атрибут type, чтобы указать тип выполняемого действия. Он рассказывает нам о том, что произошло. Типы должны быть определены как строковые константы в вашем приложении, как указано ниже -

const ITEMS_REQUEST = 'ITEMS_REQUEST';

За исключением атрибута типа, структура объекта действия полностью зависит от разработчика. Рекомендуется, чтобы ваш объект действия был как можно более легким и передавал только необходимую информацию.

Чтобы вызвать какие-либо изменения в магазине, вам нужно сначала отправить действие с помощью функции store.dispatch (). Объект действия следующий -

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

Создатели действий

Создатели действий - это функции, которые инкапсулируют процесс создания объекта действия. Эти функции просто возвращают простой объект Js, который является действием. Это способствует написанию чистого кода и помогает добиться повторного использования.

Давайте узнаем о создателе действий, который позволяет вам отправлять действие, ‘ITEMS_REQUEST’который запрашивает данные списка товаров с сервера. Между темisLoading состояние становится истинным в редукторе в типе действия ITEMS_REQUEST, чтобы указать, что элементы загружаются, а данные все еще не получены от сервера.

Первоначально состояние isLoading было ложным в initialStateобъект, если ничего не загружается. Когда данные получены в браузере, состояние isLoading будет возвращено как false в типе действия ITEMS_REQUEST_SUCCESS в соответствующем редукторе. Это состояние можно использовать как опору в компонентах реакции для отображения загрузчика / сообщения на вашей странице, пока запрос данных включен. Создатель действия выглядит следующим образом -

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 (). Однако более вероятно, что вы получите доступ к нему с помощью вспомогательного метода response-Redux, называемогоconnect(). Вы также можете использоватьbindActionCreators() метод для привязки многих создателей действий с функцией отправки.