Redux
O que é
O Redux é apenas uma forma que encontraram de guardar e atualizar o estado de forma previsível, mas o que importa pra gente é a integração dele com o React. Junto com o React é uma forma de centralizar o estado da aplicação em um lugar que qualquer componente consiga acessar e responda às alterações nos valores como se estivessem recebendo props.
Alguns nomes para se familiarizar:
- Reducers - é o estado, ele mostrar o que salvar e como levar o estado atual para o próximo estado de acordo com a action recebida num formato de listeners;
- Actions - são os possíveis eventos que podem acontecer e vão interagir com o estado, geralmente já são todos declarados por funções para serem usadas no dispatch;
- Dispatch - é uma função para disparar uma action, geralmente vai receber um objeto no formato (retorno da função da action):
{
type: 'ACTION_TYPE',
payload: 'anything'
}
- Types - é apenas uma string que dá um "nome" para action, assim o reducer sabe que action que está acontecendo;
- Payload - junto com o type, a action pode enviar qualquer informação. Geralmente o padrão é mandar todas informações extras dentro da chave
payloadmas isso não é uma obrigação, só uma convenção;
Como usar
Com o redux já configurado, você geralmente só vai precisar consumir os dados que estão no store e disparar actions para mudar esses dados. Hoje você consegue fazer isso de forma simples com hooks:
import { useDispatch, useSelector } from "react-redux";
// Componente react consumindo o redux
export const TodoList = () => {
const dispatch = useDispatch();
const reduxList = useSelector((state) => state.todoReducer.list); // Valor direto do reducer "todoReducer"
const setItemDone = (index) =>
dispatch({ type: "SET_ITEM_DONE", payload: index }); // Função que dispara action do tipo "SET_ITEM_DONE"
// ...
};
Para criar novos reducers, actions e types, conferir como está feito em cada projeto.
Como aprender
Material útil
Validando o conhecimento
- Criar projeto básico com create-react-app e fazer view simples que consegue consumir e modificar um reducer qualquer.