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

Ver planos

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

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

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

O problema do prop drilling

Explore por tópico

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

O problema do prop drilling

Explore por tópico

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