A base de Redux Toolkit e React Redux

#redux #react #braziliandevs #webdev

Está querendo aprender Redux num ambiente js ou react e ainda não sabe por onde começar?
Neste artigo eu vou explicar os conceitos junto do código de forma direta para fazer você entender melhor na prática como ele funciona!

Tabela de conteúdos:

O que é Redux?
Store, a raiz da nossa árvore de estados
Criar coleções usando Slices
Ler valores com Selector
Criando a lógica para alterar valores com Reducers
Alterando valores usando Actions
O fluxo final
Finalização

O que é Redux?

Primeiro vamos entender que Redux é uma biblioteca de gerenciamento de estados de forma mais "global" do que os estados que temos convencionalmente no React por exemplo. Ele facilita com que diversas áreas da aplicação possam interagir entre si e centralizar sua informação.

Store, a raiz da nossa árvore de estados

No Redux, o que engloba todos esses estados globais nós chamamos de "store". Pra caso tu já tenha usado, é como um provider da Context API do React.

Aqui vou criar um objeto chamado store, para você tentar pegar uma ideia de como isso é representado.

// apenas uma representação visual pra assimilar melhor:
const store = {
  // por enquanto
  // ela está vazia
}

// exemplo real
import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
  // em breve vamos adicionar as propriedades aqui
})

Criar coleções usando Slices

Indo de fora pra dentro, na nossa store nós podemos criar "slices", que são coleções nas quais contém dados. Cada slice é nomeado, e esse nome é utilizado para acessar os seus dados mais pra frente. A mesma lógica serve para um objeto:

Vamos adicionar por exemplo um slice de configurações pra armazenar as coisas do nosso usuário:

// apenas uma representação visual pra assimilar melhor:
const store = {
  configuracoes: {
    tema: "escuro",
    notificacoes: true
  }
}

// exemplo real
import { createSlice } from '@reduxjs/toolkit';

const configuracoesSlice = createSlice({
  name: 'configuracoes',
  // este é o estado inicial, aqui você insere propriedades
  // que devem ser inicializadas com este slice logo de cara
  initialState: {
    tema: "claro",
    notificacoes: false
  }
});

Ler valores com Selector

Ok Ok, até aí tudo bem, mas como nós podemos ler o valor guardado no slice? É igual um objeto store.configuracoes.tema?
Não é tão simples assim, mas no contexto de React nós chamamos isso de Selector, que é quando você vai extrair um dado de dentro da store. No contexto JS isso é apenas uma leitura normal (selector pode acabar confundindo com querySelector).

Existe a forma "nativa" de se pegar o valor, e existe a forma usada na biblioteca "react-redux", vou deixar ambos os exemplos aqui:

Usando apenas o redux toolkit:

const tema = store.getState().configuracoes.tema

Usando react-redux:

import {
  useSelector,
  Provider
} from "react-redux"

/*
  OBS: Pra usar o React-Redux, você precisa primeiro
  adicionar o Provider dele à sua aplicação:
*/
const App = () => {
  return (
    <Provider store={store}>
      // ...seus componentes  
    </Provider>
  )
}

// Agora sim você pode ler o valor
const componente = () => {
  const tema = useSelector(state =>
    state.configuracoes.tema
  )
}

Criando a lógica para alterar valores com Reducers

Perfeito, já temos configurado a nossa store, nosso slice e conseguimos ler nossos dados... porém atualmente eles estão fixos, como podemos fazer para modificar os valores?

O que usamos para isso é o que chamamos de "Reducers", eles interagem com nossos slices para mudar os seus valores usando uma lógica definida por você. Inclusive tu pode até assimilar isso com o próprio useReducer do React, que também usa uma lógica customizada para definir um valor.

Vamos criar alguns reducers e atualizar a store para listar eles!

const configuracoesSlice = createSlice({
  // propriedades mencionadas acima...
  reducers: {
    // state é o slice atual
    // action.payload é o valor recebido
    setarTema: (state, action) => {
      state.tema = action.payload
    },
    setarNotificacoes: (state, action) => {
      state.notificacoes = action.payload
    }
  }
});

// Agora que temos os reducers criados, precisamos
// atualizar a store pra incluir eles!
const store = configureStore({
  reducer: configuracoesSlice.reducer
})

Alterando valores usando Actions

Com os reducers criados, podemos usá-los pra alterar os valores do nosso slice! Isso é o que vamos chamar de "Action".

A action executa um reducer e lhe fornece um resultado, daí você precisa executar um dispatch para que o resultado seja persistido (salvo) na nossa store.

Novamente, mostrarei a forma nativa / react-redux

Usando apenas redux toolkit:

// Use o dispatch para salvar a modificação
store.dispatch(
  // Use a action passando o novo valor
  configuracoesSlice.actions.setarTema("escuro")
)

Usando react-redux:

import { useDispatch } from "react-redux"

const Componente = () => {
  const dispatch = useDispatch(); 
  // O ato de salvar com dispatch continua igual, mas
  // ao invés de vir da store, ele vem do react-redux
  dispatch(
    configuracoesSlice.actions.setarTema("escuro")
  )
}

O fluxo final

Já cobrimos muitos tópicos da base de como se utilizar Redux Toolkit e também React Redux, mas queria te fazer uma pergunta: Acabou de notar que fizemos um CRUD?

Pois nós conseguimos:

Criar dados usando Slices
Ler os dados usando Selectors
Atualizar por meio de Reducers/Actions
E também dá pra deletar com reducers

Com essas informações agora conseguimos entender este diagrama que exemplifica o fluxo de dados do Redux:

Com os métodos ensinados neste artigo você deve conseguir se dar bem com o Redux, mas caso queira checar melhor a implementação feita neste artigo, vou disponibilizar ambos os arquivos finais para uma consulta mais fácil:

Arquivo final usando apenas redux toolkit: Gist
Arquivo final usando react-redux: Gist

Ambos estão fazendo a mesma coisa, porém em ambientes diferentes! O primeiro sendo um javascript comum, enquanto o segundo é num ambiente React.

Finalização

E é isso pessoal! Agora vocês já sabem o kit de sobrevivência pra Redux Toolkit e também React Redux!
Espero ter te ajudado de alguma forma, e sinta-se livre para deixar comentários de dúvidas ou feedback :)

Eu sempre falo de programação no Twitter, se quiser acompanhar meu conteúdo, welcome!

👋 Até uma próxima.