Introdução

Olá (General Kenobi). Vamos falar um pouco sobre o que é Redux e entender como podemos implementar isso com o react sem muita complicação. Antes de falarmos sobre redux, precisamos entender algumas coisas para ter certeza de que todos estão na mesma página, já que você pode ser um iniciante ou não ter nenhuma experiência anterior com React. Não se preocupe se você não souber nada sobre reagir, pois vou te explicar de uma forma que você entenda que tipo de problema estamos tentando resolver aqui.

Compreender o básico

Vamos ver, acho que tudo é um bloco, e dentro de um bloco pode ter um bloco filho e essa criança só pode receber informação se um filho do bloco tiver a informação, mas o que isso significa?

1. Para que o bloco azul receba informações do bloco verde, ele precisa estar dentro do bloco verde.
2. Se o bloco laranja precisar das informações que estão dentro do bloco verde, essas informações precisam ser movidas para o bloco preto.

O problema

Imagine, você tem um aplicativo complexo e grande e precisa passar dados de um componente de nível superior para um componente de nível inferior. Isso provavelmente será uma codificação complexa e fornecer dados a um componente que nunca os usará. Chamamos isso de perfuração de suporte.

Restaurado

O que é gerenciamento de estado?

Desde o início deste artigo, falamos apenas sobre como podemos lidar com estados entre componentes e componentes com seu próprio estado. O gerenciamento de estado trata de como podemos resolver esse problema quando seu aplicativo crescer.

O que é Redux?

Redux é uma biblioteca para gerenciar o estado do aplicativo.

Por que devo usar o Redux?

Como vimos antes, o gerenciamento de estados compartilhados entre os componentes se torna difícil.

Quando devo usar o Redux?

Essa é uma boa pergunta porque quem trabalha com reage, sabe que existe outra maneira de fazer, e para quem quer saber, estou falando de ganchos React, mobx e outros.

Não estou aqui para dizer o que você deve usar, porque depende de que tipo de aplicativo você está construindo e trabalhando, mas se o aplicativo não for tão complexo, você pode usar os ganchos React.

Termos Redux

• Estado é um objeto que descreve partes do aplicativo.
• Nossa visão vai se comportar com base no estado.
• Ação muda nosso estado.
• De volta à visualização, quando uma ação muda algo em nosso estado, a visualização será renderizada novamente.

• Ações no Redux: Uma ação é basicamente uma carga útil que descreve e envia dados de nosso aplicativo para nossa loja.

{type: "todos/addTodo",payload: {text:"Redux"}}

const addTodo = text => {
 return {
  type: 'todos/addTodo',
  payload: text
 }
}

const todoReducer= (state = {}, action) => {
   switch (action.type) {
     case "todos/addTodo":
       return {
         ...state,
         ...action.payload
       };
     default:
       return state;
   }
 };

const store = createStore(todoReducer);

store.dispatch(addTodo("Todo"))

const getTodos = state => state.value
//getState returns the current state 
const todos = getTodos(store.getState())

• Primeiro passo: Precisamos importar createSlice, esta função helper nos permite definir nosso redutor e estado inicial, também cuida da geração dos criadores e tipos de ação. Se você olhar mais de perto o código em createSlice, há uma chave chamada “nome”, esse nome é a primeira parte do tipo de cada redutor e a segunda parte do nosso tipo é a chave de cada redutor. Temos algo assim, nossa primeira parte do tipo é o nome “todos” + a segunda parte é a chave “addTodo”. Cada criador de ação tem o mesmo nome da função redutora.

//src\todoSlice.js
import { createSlice } from '@reduxjs/toolkit'
const todoSlice = createSlice({
 name: 'todos',
 initialState: {
   value: {}
 },
 reducers: {
   addTodo: (state, action) => {
     const {payload, type} = action;
     state.value[payload] = {id: payload, value: payload};
   }
 }
})
export const { addTodo } = todoSlice.actions;
export default todoSlice.reducer;

//src\store.js
import { configureStore } from '@reduxjs/toolkit'
import todoSlice from './todoSlice';
 export default configureStore({
  reducer: {
    todos: todoSlice,
  //system
 }
})

//src\App.js 
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import App from './App';
import store from './store';
ReactDOM.render(
 <Provider store={store}>
  <React.StrictMode>
   <App />
  </React.StrictMode>
 </Provider>,
 document.getElementById('root')
);

//src\form import React, {useState} from 'react';
import { useDispatch } from 'react-redux';
import {addTodo} from './todoSlice';
const Form = () => {
   const [text, setText] = useState(''); 
   const dispatch = useDispatch(); 
   const onSaveTodo = () => {
       dispatch(addTodo(text));
       setText('');
   }
   return (
       <>
           <input onChange={(e) => setText(e.target.value)} value=              {text}/>
           <button onClick={() => onSaveTodo()} >Add</button>        </>
    );
}  
export default Form;

import React from 'react';
import { useSelector } from 'react-redux';
const List = () => {
   const todos = useSelector((state) => state.todos.value); 
   const values = Object.values(todos);
   return (
      <>
          {
              values.map((todo, index) => <div key={todo.id}>{index + 1} - {todo.value}</div>)
          }
      </>
   );
}
export default List;

import React from 'react';
import Form from './form';
import List from './List';
const App = () => {
  return (
   <div>
     <Form/>
     <List/>
   </div>
 );
}
export default App;