Redux - Ações

Ações são a única fonte de informação para a loja conforme documentação oficial do Redux. Ele carrega uma carga útil de informações de seu aplicativo para o armazenamento.

Conforme discutido anteriormente, as ações são objetos JavaScript simples que devem ter um atributo type para indicar o tipo de ação executada. Isso nos conta o que aconteceu. Os tipos devem ser definidos como constantes de string em seu aplicativo, conforme fornecido abaixo -

const ITEMS_REQUEST = 'ITEMS_REQUEST';

Além deste atributo de tipo, a estrutura de um objeto de ação é totalmente de responsabilidade do desenvolvedor. Recomenda-se manter seu objeto de ação o mais leve possível e passar apenas as informações necessárias.

Para causar qualquer mudança na loja, você precisa despachar uma ação primeiro usando a função store.dispatch (). O objeto de ação é o seguinte -

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

Criadores de ações

Criadores de ação são as funções que encapsulam o processo de criação de um objeto de ação. Essas funções simplesmente retornam um objeto Js simples que é uma ação. Promove a escrita de código limpo e ajuda a alcançar a capacidade de reutilização.

Deixe-nos aprender sobre o criador de ação, que permite que você despache uma ação, ‘ITEMS_REQUEST’que as solicitações dos itens de produtos listam dados do servidor. Enquanto isso, oisLoading O estado é tornado verdadeiro no redutor no tipo de ação 'ITEMS_REQUEST' para indicar que os itens estão sendo carregados e os dados ainda não foram recebidos do servidor.

Inicialmente, o estado isLoading era falso no initialStateobjeto assumindo que nada está carregando. Quando os dados são recebidos no navegador, o estado isLoading será retornado como falso no tipo de ação 'ITEMS_REQUEST_SUCCESS' no redutor correspondente. Este estado pode ser usado como um suporte em componentes de reação para exibir o carregador / mensagem em sua página enquanto a solicitação de dados está ativada. O criador da ação é o seguinte -

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

Para invocar uma função de despacho, você precisa passar a ação como um argumento para a função de despacho.

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

Você pode despachar uma ação diretamente usando store.dispatch (). No entanto, é mais provável que você o acesse com o método auxiliar react-Redux chamadoconnect(). Você também pode usarbindActionCreators() método para vincular muitos criadores de ação com a função de despacho.