Guia de bibliotecas para lidar com gerenciamento de estados em projetos React

Guia de bibliotecas para lidar com gerenciamento de estados em projetos React | Alura Cursos Online

props

import { useState } from 'react';
import ListaDeTarefas from './components/ListaDeTarefas';
export default function App() {
  const [tarefas, setTarefas] = useState([
    'Estudar React',
    'Fazer exercício',
    'Ler um livro'
  ]);
  const adicionarTarefa = (novaTarefa) => {
    setTarefas([...tarefas, novaTarefa]);
  };
  return (
    <div>
      <h1>Minha Lista de Tarefas</h1>
      <ListaDeTarefas
        tarefas={tarefas}
        adicionarTarefa={adicionarTarefa} />
    </div>
  );
}

import Tarefas from "../Tarefas";
import Formulario from "../Formulario";
export default function ListaDeTarefas({ tarefas, adicionarTarefa }) {
  return (
    <div>
      <Formulario adicionarTarefa={adicionarTarefa} />
      <Tarefas tarefas={tarefas} />
    </div>
  )
}

import { useState } from "react";
export default function Formulario({ adicionarTarefa }) {
  const [novaTarefa, setNovaTarefa] = useState('');
  const submeterTarefa = (e) => {
    e.preventDefault();
    if (novaTarefa.trim()) {
      adicionarTarefa(novaTarefa);
      setNovaTarefa('');
    }
  };
  return (
    <form onSubmit={submeterTarefa}>
      <input
        type="text"
        value={novaTarefa}
        onChange={(e) => setNovaTarefa(e.target.value)}
        placeholder="Adicione uma nova tarefa"
      />
      <button type="submit">Adicionar</button>
    </form>
  );
}

export default function Tarefas({ tarefas }) {
    return (
        <ul>
            {tarefas.map((tarefa, index) => (
                <li key={index}>{tarefa}</li>
            ))}
        </ul>
    );
}

import { createContext, useState } from 'react';
export const TarefasContext = createContext();
export const TarefasProvider = ({ children }) => {
  const [tarefas, setTarefas] = useState([
    'Estudar React',
    'Fazer exercício',
    'Ler um livro'
  ]);
  const adicionarTarefa = (novaTarefa) => {
    setTarefas([...tarefas, novaTarefa]);
  };
  return (
    <TarefasContext.Provider value={{ tarefas, adicionarTarefa }}>
      {children}
    </TarefasContext.Provider>
  );
};

import ListaDeTarefas from "./components/ListaDeTarefas";
import { TarefasProvider } from "./context/TarefasContext";
export default function App() {
  return (
    <TarefasProvider>
      <div>
        <h1>Minha Lista de Tarefas</h1>
        <ListaDeTarefas />
      </div>
    </TarefasProvider>
  );
}

import Formulario from "../Formulario";
import Tarefas from "../Tarefas";
export default function ListaDeTarefas() {
  return (
    <div>
      <Formulario />
      <Tarefas />
    </div>
  );
}

//Componente Tarefa
import { useContext } from "react";
import { TarefasContext } from "../../context/TarefasContext";
export default function Tarefas() {
  const { tarefas } = useContext(TarefasContext);
//RESTANTE DO CÓDIGO

//Componente Formulario
import { useContext, useState } from "react";
import { TarefasContext } from "../../context/TarefasContext";
export default function Formulario() {
  const [novaTarefa, setNovaTarefa] = useState('');
  const { adicionarTarefa } = useContext(TarefasContext);
  const submeterTarefa = (e) => {
    e.preventDefault();
    if (novaTarefa.trim()) {
      adicionarTarefa(novaTarefa);
      setNovaTarefa('');
    }
  }
//RESTANTE DO CÓDIGO

import { createSlice } from '@reduxjs/toolkit';
const tarefasSlice = createSlice({
  name: 'tarefas',
  initialState: ['Estudar React', 'Fazer exercício', 'Ler um livro'],
  reducers: {
    adicionarTarefa: (state, action) => {
      state.push(action.payload);  // adiciona nova tarefa à lista
    }
  }
});
export const { adicionarTarefa } = tarefasSlice.actions;
export default tarefasSlice.reducer;

import { configureStore } from '@reduxjs/toolkit';
import tarefasReducer from './features/tarefasSlice';
const store = configureStore({
  reducer: {
    tarefas: tarefasReducer
  }
});
export default store;

import { Provider } from 'react-redux';
import store from './store';
import ListaDeTarefas from './components/ListaDeTarefas';
export default function App() {
  return (
    <Provider store={store}>
      <div>
        <h1>Minha Lista de Tarefas</h1>
        <ListaDeTarefas />
      </div>
    </Provider>
  );
}

//Componente Formulario
import { useState } from "react";
import { useDispatch } from "react-redux";
import { adicionarTarefa } from "../../features/tarefasSlice";
export default function Formulario() {
  const [novaTarefa, setNovaTarefa] = useState('');
  const dispatch = useDispatch();
  const submeterTarefa = (e) => {
    e.preventDefault();
    if (novaTarefa.trim()) {
      dispatch(adicionarTarefa(novaTarefa));  // Dispara a ação para adicionar tarefa
      setNovaTarefa('');
    }
  };
//RESTANTE DO CÓDIGO

import { create } from "zustand";
const useTarefasStore = create((set) => ({
  tarefas: [
    'Estudar React',
    'Fazer exercício',
    'Ler um livro',
  ],
  adicionarTarefa: (novaTarefa) => set((state) => ({
    tarefas: [...state.tarefas, novaTarefa],
  })),
}));
export default useTarefasStore;

//Componente Formulario
import { useState } from "react";
import useTarefasStore from "../../store/useTarefasStore";
export default function Formulario() {
  const [novaTarefa, setNovaTarefa] = useState('');
  const { adicionarTarefa } = useTarefasStore();
  const submeterTarefa = (e) => {
    e.preventDefault();
    if (novaTarefa.trim()) {
      adicionarTarefa(novaTarefa);
      setNovaTarefa('');
    }
  }
//RESTANTE DO CÓDIGO

const listaDeTarefasFiltradaState = selector({
  key: 'ListaDeTarefasFiltradat',
  get: ({get}) => {
    const filtro = get(listaDeTarefasState);
    const lista = get(listaDeTarefasState);
    switch (filtro) {
      case 'Completo':
        return lista.filter((item) => item.completo);
      case 'Nao Completo':
        return lista.filter((item) => !item.compelto);
      default:
        return list;
    }
  }
})

//Componente Tarefa
import { useRecoilValue } from "recoil";
import { tarefaState } from "../../state/atom";
export default function Tarefas() {
    const tarefas = useRecoilValue(tarefaState);
//RESTANTE DO CÓDIGO

//Componente Formulario
import { useState } from "react";
import { useSetRecoilState } from 'recoil';
import { tarefaState } from "../../state/atom";
export default function Formulario() {
  const [novaTarefa, setNovaTarefa] = useState('');
  const setTarefas = useSetRecoilState(tarefaState);
  const submeterTarefa = (e) => {
    e.preventDefault();
    if (novaTarefa.trim()) {
      setTarefas(tarefasAntigas => [...tarefasAntigas, novaTarefa]);
      setNovaTarefa('');
    }
  }
//RESTANTE DO CÓDIGO

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          ["@babel/plugin-proposal-decorators", { version: "2023-11" }],
        ],
      },
    }),
  ],
});

import { observable, action } from "mobx";
class TarefasStore {
  @observable accessor tarefas = ['Estudar React', 'Fazer exercício', 'Ler um livro'];
  @action adicionarTarefa = (novaTarefa) => {
    this.tarefas.push(novaTarefa);
  };
}
const tarefasStore = new TarefasStore();
export default tarefasStore;

//RESTANTE DO CÓDIGO
    <Provider tarefasStore={tarefasStore}>
      <div>
        <h1>Minha Lista de Tarefas</h1>
        <ListaDeTarefas />
      </div>
    </Provider>
//RESTANTE DO CÓDIGO

//Componente Tarefa
//RESTANTE DO CÓDIGO
    <ul>
      {tarefasStore.tarefas.map((tarefa, index) => (
        <li key={index}>{tarefa}</li>
      ))}
    </ul>
  );
}
export default observer(Tarefas);

//Componente Formulario
//RESTANTE DO CÓDIGO
  const submeterTarefa = (e) => {
    e.preventDefault();
    if (novaTarefa.trim()) {
      tarefasStore.adicionarTarefa(novaTarefa);
      setNovaTarefa('');
    }
  };
//RESTANTE DO CÓDIGO

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Guia de bibliotecas para lidar com gerenciamento de estados em projetos React

RODRIGO SILVA HARDER

Explore por tópico

O problema do prop drilling

Solução nativa do React: a Context API

Bibliotecas para gerenciar estados

Redux

Redux Toolkit

Zustand

Recoil

Átomos

Seletores

MobX

Legal, mas e agora qual eu escolho?

Conclusão

RODRIGO SILVA HARDER

Inscreva-se em nossa Newsletter

Explore por tópico

O problema do prop drilling

Solução nativa do React: a Context API

Bibliotecas para gerenciar estados

Redux

Redux Toolkit

Zustand

Recoil

Átomos

Seletores

MobX

Legal, mas e agora qual eu escolho?

Conclusão

Leia também