Um guia rápido para configurar um aplicativo React com Redux + Thunk.

O que é Redux?

Redux é uma biblioteca JavaScript usada para gerenciar o estado do aplicativo. Ele pode ser dividido em três componentes principais.

1. Armazenar
2. Ação
3. Redutor

Uma ação é um objeto JavaScript simples que tem dois atributos: um tipo e uma carga útil . O objetivo principal de uma ação é descrever algo que aconteceu no aplicativo (por exemplo, o usuário clica em um botão para adicionar um item ao carrinho de compras).

Um redutor é uma função que recebe o estado atual e uma ação. Ele determina como atualizar o estado com base no tipo de ação e, em seguida, retorna um novo estado.

Por que precisamos de Tunk?

Um criador de ação é uma função que retorna um actionobjeto, que é então despachado para a loja Redux. Normalmente, um criador de ação só pode retornar um objeto. Ao instalar o middleware Tunk, podemos criar criadores de ação que retornam uma função. Isso permite que seu aplicativo faça chamadas de busca e interaja com um servidor.

Compare os dois criadores de ação abaixo.

// returns an object
export const createTodo = todo => {
  return {
    type: "CREATE_TODO",
    payload: todo
  }
}
// returns a function
export const getTodo = () => {
  return(dispatch) => {
    return fetch(url)
    .then(resp => resp.json())
    .then(todo => dispatch({ type: "GET_TODO", payload: todo }))
  })
}

Antes de começarmos

O objetivo do nosso aplicativo é exibir um botão. Quando o botão é clicado, uma imagem de um cachorro aleatório deve ser exibida.

Configurando o Redux

Se você ainda não tiver um aplicativo React configurado, vá em frente e execute o seguinte comando em seu terminal.

npx create-react-app redux-app

yarn add redux react-redux redux-thunk

Configure o redutor

Navegue até a reducerspasta primeiro. Crie um arquivo chamado dogReducer.js.

// ./src/reducers/dogReducer.js
const dog = (state = '', action) => {
  switch(action.type) {
    case 'CHANGE_IMAGE':
      return action.payload
    default:
      return state
    }
}
export default dog;

À medida que seu aplicativo cresce, pode ser necessário criar mais de um redutor. Para fazer isso, você precisará criar um arquivo combineReducers.

Navegue dentro da reducerspasta e crie um arquivo chamado index.js.

// ./src/reducers/index.js
import { combineReducers } from 'redux';
import dog from './dogReducer';
import anotherReducer from './anotherReducer';
export default combineReducers({
  dog,
  anotherReducer
})

Navegue até a actionspróxima pasta. Crie um arquivo chamado index .js.

// ./src/actions/index.js
export const changeImage = () => {
  return(dispatch) => {
    return fetch('https://dog.ceo/api/breeds/image/random')
    .then(resp => resp.json())
    .then(image => dispatch({ type: "CHANGE_IMAGE", payload: image.message }))
  }
}

Navegue para ./src/index.js.

Importe o seguinte.

import { Provider } from 'react-redux';
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import dog from './reducers/dogReducer';

import rootReducer from './reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

Em seguida, crie a loja.

let store = createStore(colors, composeEnhancers(applyMiddleware(thunk)))

<Provider store={store} >
  <App />
</Provider>

Criar DogContainer e Componentes Dog

Navegue para ./src.

Crie DogContainer.js.

Crie Dog.js.

Conclusão

Executar yarn start.

Neste ponto, o aplicativo deve estar funcionando.

Para resumir:

1. Um usuário clicará no botão Alterar imagem .
2. O evento click aciona uma ação a ser despachada para a loja Redux.
3. A ação eventualmente chegará ao nosso middleware Tunk. É quando qualquer processo assíncrono acontecerá. No nosso caso, uma solicitação de busca será enviada para uma API externa, que retornará a URL de uma imagem de cachorro aleatória.
4. Quando nosso trabalho assíncrono estiver concluído, um objeto de ação com um atributo de carga útil contendo nossa URL de imagem será despachado para o Redutor.
5. O redutor receberá o estado anterior e o objeto de ação atual. Ele retornará um novo estado com seu valor definido para o URL da imagem.
6. A mudança de estado acionará uma nova renderização, exibindo nossa nova imagem de cachorro.