Учебники

Redux — Действия

Декабрь 18, 2018

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

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

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

47
Share: