Redux no React - Assíncrono

리덕스 썽크

오케이?

É um pacote complementar do Redux que permite a execução de código assíncrono, para o armazenamento e manipulação de estados. Esse pacote é necessário, pois normalmente o Redux aceita apenas codigo 100% sincrono.

인스타란도

Por se tratar de um pacote complementar, ele não vem instalado junto ao Redux, porém para instalá-lo é muito simples, basta utilizar o comando:
npm i redux-thunk
Não sendo necessário nenhuma configuração adicional.

Aplicando Redux-Thunk no Redux

Para termos acesso à as funcionalidades assíncronas, precisamos passar um segundo parametro para a função createStore(), que é outra função chamada applyMiddleware(), que por sua vez recebe u-âmetro.

const store = createStore(rootReducer, applyMiddleware(thunk));

Redux-Thunk 작업

신탁스

Action Creator의 역할은 Redux-Thunk를 통해 가능하며, 더 많은 기능을 사용할 수 있고, 신속하게 처리할 수 있습니다.

function asyncAction() {
  return (dispatch) => {};
}

Em geral a sintaxe é a do exemplo acima, porém podemos "incrementar"a Action Creator o quanto quisermos, desde que ela retorne ao final um objeto no formato esperado pelo Reducer.

function fetchData() {
  return (dispatch) => {
    dispatch(startRequest());
      return fetch(<API endpoint>)
        .then((res) => res.json()
        .then(
          (data) => dispatch(getData(data)),
          (error) => dispatch(getError(error)),
        ));
  };
}

No exemplo acima temos uma função que pode disparar três Actions, sendo elas ownivamente startRequest(), getData() e getError() . O nome dado no exemplo é genérico, porém em funções de requisição à API não é incomum que tenhamos exatamente essas três Actions, porém com nomes mais apropriados.

시작요청

A startRequest() é uma Action que tem como função alterar o estado de "loading"da aplicação, assim podemos realizar renderizações condicionais como fazíamos sem usar o Redux.

const startRequest = () => ({ type: START_REQUEST });

데이터 가져오기

A getData(), como o nome dá entender, é uma Action que irá salvar em nosso estado os dados recebidos da API, sendo necessário preparar o Reducer para os diferentes tipos de dados.

const getData = (payload) => ({ type: GET_DATA, payload });

getError

E por fim a getError() é uma Action que irá armazenar o erro de requisição em nosso estado, isso se houver um erro.

const getError = (payload) => ({ type: GET_ERROR, payload });

감속기의 예

Abaixo será mostrado um Reducer genérico de acordo com a função e as actions exemplificadas acima.
Já adiantando que estrutura base continuará sendo mesma.

const INITIAL_STATE = {
  data: [],
  error: undefined,
  loading: false,
}

export default function myReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case START_REQUEST:
      return {
        ...state,
        loading: true,
      }
    case GET_DATA:
      return {
        ...state,
        data: action.payload,
        loading: false,
      }
    case GET_ERROR:
      return {
        ...state,
        error: action.payload,
        loading: false,
      }
    default:
      return state;
  }
}

감속기 없음 acima temos três casos, o Primeiro apenas altera a chave loading , indicando que uma requisição foi iniciada, já o segundo e terceiro caso, além de alterarem novamente a679arfo) armazenam a resposta dessa requisição, seja ela dados ou erros (respectivamente).

에오 레스토?

Redux(감축기, 저장, 공급자 전자 작업 싱크로나스)가 계속해서 기능을 확장할 수 있는 기반을 마련합니다.