Redux é amplamente reconhecido como uma biblioteca robusta de gerenciamento de estado projetada especificamente para aplicativos JavaScript, frequentemente utilizada em conjunto com a popular estrutura React. Ao oferecer um contêiner de estado confiável, o Redux estabelece uma base sólida que simplifica muito a tarefa de lidar e solucionar problemas de estados de aplicativos. Este guia se aprofunda nos componentes fundamentais que compõem o Redux, fornecendo explicações detalhadas de cada elemento e ilustrando como eles interoperam sinergicamente para agilizar a funcionalidade geral do aplicativo. Esta exploração aprofundada visa elucidar o funcionamento interno do Redux, capacitando os desenvolvedores a compreender os meandros desta ferramenta de gerenciamento de estado e aproveitar seus recursos de forma eficaz em seus projetos.

Índice

1. Introdução ao Redux
2. Configurando Redux em um aplicativo React
3. Ações e tipos de ação
4. Redutores e fatias
5. Configurando a Loja
6. Conectando componentes do React
7. Conclusão e Referências

1. Introdução ao Redux

Redux segue um modelo de fluxo de dados unidirecional e é baseado em três princípios básicos:

• Fonte única de verdade: O estado de todo o seu aplicativo é armazenado em uma árvore de objetos em um único armazenamento. Essa centralização facilita a depuração e o rastreamento de alterações em seu aplicativo.
• O estado é somente leitura: A única maneira de alterar o estado é emitir uma ação, um objeto descrevendo o que aconteceu. Isso garante que as mutações de estado sejam previsíveis e rastreáveis.
• As mudanças são feitas com funções puras: Para especificar como a árvore de estados é transformada por ações, você escreve redutores puros. Funções puras são previsíveis e testáveis, o que simplifica a depuração e os testes unitários.

2. Configurando Redux em um aplicativo React

Primeiro, instale Redux e React-Redux:

npm install redux react-redux @reduxjs/toolkit

Este comando instala a biblioteca central Redux, as ligações React para Redux e o Redux Toolkit, que simplifica muitas tarefas comuns, como configurar o armazenamento e criar fatias.

3. Ações e tipos de ação

Ações são cargas úteis de informações que enviam dados do seu aplicativo para sua loja Redux. Os tipos de ação são constantes que representam a ação.

actionTypes.js

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const INCREMENT_BY_VALUE = "INCREMENT_BY_VALUE";
export const RESET = "RESET";

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
export const incrementByValue = (value) => ({
  type: INCREMENT_BY_VALUE,
  payload: value,
});
export const reset = () => ({ type: RESET });

Definir claramente ações e tipos de ação ajuda a manter a consistência e reduz erros em seu aplicativo.

4. Redutores e Fatias

Os redutores especificam como o estado do aplicativo muda em resposta às ações enviadas à loja. Fatias são uma coleção de lógica e ações redutoras do Redux para um único recurso do seu aplicativo, criadas usando o método createSlice do Redux Toolkit.

contadorSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = { number: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.number  = 5;
    },
    decrement: (state) => {
      state.number = Math.max(0, state.number - 5);
    },
    incrementByValue: (state, action) => {
      state.number  = action.payload;
    },
    reset: (state) => {
      state.number = 0;
    },
  },
});

export const { increment, decrement, incrementByValue, reset } = counterSlice.actions;

export default counterSlice.reducer;

Para combinar várias fatias:

rootReducer.js

import { combineReducers } from "@reduxjs/toolkit";
import counterReducer from "../slices/counterSlice";

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

5. Configurando a Loja

A loja é o objeto que reúne ações e redutores. Ele mantém o estado do aplicativo, permite acesso a ele via getState(), atualiza-o via dispatch(action) e registra ouvintes via subscribe(listener).

loja.js

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "../reducers/rootReducer";

const store = configureStore({
  reducer: rootReducer,
});

export default store;

6. Conectando componentes do React

Para conectar componentes React ao armazenamento Redux, use o componente Provider do react-redux para passar o armazenamento para seus componentes e use os ganchos useSelector e useDispatch para acessar e manipular o estado.

Aplicativo.js

import React from "react";
import { Provider } from "react-redux";
import store from "./redux/store/store";
import Counter from "./components/Counter";
import MusCo from "./MusCo redux logo.png";

function App() {
  return (
    

        

          Practice Redux with MusCo
        
        

          

            by 
            Mustafa 
            Coskuncelebi
          
        
      
    
  );
}

export default App;

CounterComponent.js

import { useDispatch, useSelector } from "react-redux";
import {
  decrement,
  increment,
  incrementByValue,
  reset,
} from "../slices/counterSlice";
import { useState, useEffect } from "react";

function Counter() {
  const [value, setValue] = useState("");
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  useEffect(() => {
    const showcase = document.querySelector("#showcase");
    if (number 
      
Counter
      
{number}
      

         dispatch(increment())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
          Increment by 5
        
         dispatch(decrement())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={number 
          Decrement by 5
        
      
      

        

           {
                   let newValue = e.target.value.trim();
                   if (newValue === "") {
                     newValue = "";
                     reset();
                   }
                   if (/^\d*$/.test(newValue)) {
                     setValue(newValue);
                   }
                 }} 
                 value={value} 
                 placeholder="Enter Value" />
           {
            dispatch(incrementByValue(Number(value)));
            setValue("");
          }} className="w-40 h-10 p-2 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
            Add this Value
          
        
      
       {
        dispatch(reset());
        setValue("");
      }} className="w-20 h-10 p-2 text-white rounded-md outline-1 outline-violet-500

 outline mb-7 bg-violet-900">
        Reset
      
      

        Counter cannot be less than 0
      
    
  );
}

export default Counter;

7. Conclusão e Referências

Redux é uma biblioteca poderosa para gerenciar o estado em seus aplicativos. Ao compreender as ações, os redutores, o armazenamento e como conectar tudo aos seus componentes React, você pode criar aplicativos previsíveis e de fácil manutenção.

Pontos chave:

• Ações: defina o que deve acontecer no seu aplicativo.
• Redutores: Especifique como o estado muda em resposta às ações.
• Loja: Mantém o estado e controla as ações.
• Provider: passa o armazenamento para seus componentes React.

Para mais informações, confira a documentação oficial do Redux:

• Documentação Redux
• Documentação do kit de ferramentas Redux
• Documentação React-Redux

Ao seguir este guia, você deverá ter um conhecimento sólido do Redux e ser capaz de implementá-lo em seus próprios aplicativos.