Cookie Consent by Free Privacy Policy Generator 📌 Gerenciamento de Estado com Redux Toolkit: Boas Práticas


✅ Gerenciamento de Estado com Redux Toolkit: Boas Práticas


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

Introdução

O Redux Toolkit é uma ferramenta oficial recomendada para simplificar o gerenciamento de estado em aplicações React. Ele fornece um conjunto de utilitários que ajudam a reduzir a quantidade de código necessário para trabalhar com Redux, tornando o estado mais previsível e fácil de gerenciar.

Configuração Inicial

Primeiro, precisamos configurar o Redux Toolkit na nossa aplicação React. Supondo que você já tenha um projeto React criado, você pode seguir estes passos:

Instalação

Instale o Redux Toolkit e React-Redux via NPM ou Yarn:

npm install @reduxjs/toolkit react-redux

ou

yarn add @reduxjs/toolkit react-redux

Configuração da Store

Crie uma store Redux utilizando o configureStore do Redux Toolkit. No diretório raiz do seu projeto, crie uma pasta app e, dentro dela, um arquivo chamado store.js:

import { configureStore } from '@reduxjs/toolkit';

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

Criando Slices

Um "slice" é uma coleção de reducer e actions geradas automaticamente para um pedaço específico do estado da aplicação.

Exemplo de Slice

Vamos criar um slice para gerenciar o estado de uma lista de tarefas. Primeiro, crie uma pasta features e, dentro dela, uma pasta todos. Em features/todos, crie um arquivo chamado todosSlice.js:

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

export const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push({ id: state.length + 1, text: action.payload, completed: false });
    },
    toggleTodo: (state, action) => {
      const todo = state.find(todo => todo.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
  },
});

export const { addTodo, toggleTodo } = todosSlice.actions;

export default todosSlice.reducer;

Integrando o Slice com a Store

Volte ao arquivo app/store.js e inclua o reducer do slice:

import { configureStore } from '@reduxjs/toolkit';
import todosReducer from '../features/todos/todosSlice';

export const store = configureStore({
  reducer: {
    todos: todosReducer,
  },
});

Usando Redux Toolkit na Aplicação

Agora que configuramos o Redux Toolkit e criamos um slice, podemos usá-lo em nossos componentes React.

Fornecendo a Store com o Provider

No arquivo index.js da sua aplicação, use o Provider do React-Redux para passar a store para sua aplicação:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Usando o Estado e Actions no Componente

Em um componente React, você pode usar os hooks useSelector e useDispatch para interagir com o estado Redux:

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, toggleTodo } from './features/todos/todosSlice';

const TodoApp = () => {
  const [newTodo, setNewTodo] = useState('');
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(addTodo(newTodo));
    setNewTodo('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
        />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todos.map(todo => (
          <li
            key={todo.id}
            onClick={() => dispatch(toggleTodo(todo.id))}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

Conclusão

O Redux Toolkit simplifica significativamente

o gerenciamento de estado em aplicações React, reduzindo a complexidade e o boilerplate associado ao Redux tradicional. Com a configuração inicial, criação de slices e integração com componentes React, você pode construir aplicações robustas e previsíveis com eficiência. Explorar ainda mais as funcionalidades do Redux Toolkit, como middlewares e APIs assíncronas, pode elevar ainda mais o potencial da sua aplicação.

...

✅ Gerenciamento de Estado com Redux Toolkit: Boas Práticas


📈 138.39 Punkte

✅ Gerenciamento de Estado com Context API vs Redux


📈 73.12 Punkte

✅ Redux VS Redux Toolkit && Redux Thunk VS Redux-Saga


📈 68.01 Punkte

✅ Técnicas de Concorrência e Gerenciamento de Estado em Elixir com FSM


📈 58.65 Punkte

✅ RESTful: Boas práticas para design de API


📈 55.15 Punkte

✅ Nomeação de Variáveis CSS: Boas Práticas e Abordagens


📈 55.15 Punkte

✅ Boas práticas que fazem a diferença #1


📈 55.15 Punkte

✅ Boas Práticas ao nomear variáveis e funções


📈 55.15 Punkte

✅ Quais são as boas práticas do Código Limpo?


📈 55.15 Punkte

✅ Exploring Redux Toolkit 2.0 and the Redux second generation


📈 39.06 Punkte

✅ Setting up Redux Persist with Redux Toolkit in React JS


📈 39.06 Punkte

✅ El estado actual de la IA en LMS de código abierto: Comparación entre Moodle, Canvas, Open edX y Sakai


📈 29.32 Punkte

✅ Estudos em Quality Assurance (QA) - Jira: O Básico de Gerenciamento de Issues


📈 29.32 Punkte

✅ ** ¡Códigos de estado HTTP con Courage el perro cobarde **🐕


📈 29.32 Punkte

✅ Utilizando Dotenv para Gerenciamento de Variáveis de Ambiente e Alembic


📈 29.32 Punkte

✅ Jucepi Governo de Estado Piaui Brasil XSS SQL Injection


📈 29.32 Punkte

✅ Bitmasking em Go: Uma Técnica Poderosa para Gerenciamento de Opções


📈 29.32 Punkte

✅ React Redux Tutorial #1 - Was ist React Redux


📈 28.94 Punkte

✅ React Redux Tutorial #1 - Was ist React Redux


📈 28.94 Punkte

✅ Connecting Redux Form with React Redux


📈 28.94 Punkte

✅ Connecting Redux Form with React Redux


📈 28.94 Punkte

✅ [PT-BR] Escrevendo Boas Mensagens de Commit


📈 28.6 Punkte

✅ RESTful APIs: Fundamentos, Práticas e Implementação


📈 26.54 Punkte

✅ Diferenças práticas entre GCP Cloud Functions e AWS Lambda Functions


📈 26.54 Punkte

✅ Logs de Aplicações: Motivações e Melhores Práticas de Utilização


📈 26.54 Punkte

✅ SemVer - Versionamento de Código: Princípios e Práticas


📈 26.54 Punkte

✅ 1.6 - Ponto e vírgula, posicionamento e práticas de recuo


📈 26.54 Punkte

✅ Building a shopping cart using React, Redux toolkit


📈 24.59 Punkte

✅ A Guide To Redux Toolkit With TypeScript


📈 24.59 Punkte

✅ Navigating React State: useState, useReducer, Context, Redux Toolkit, Recoil


📈 24.59 Punkte

✅ How to get started with Redux Toolkit!


📈 24.59 Punkte

✅ Using Redux Toolkit Query to Create an Authentication API with ``injectEndpoints``


📈 24.59 Punkte

✅ Understand Redux Toolkit Query and its Applications in Web App Development


📈 24.59 Punkte

✅ How to Use Redux Toolkit to Manage State in Your React Application


📈 24.59 Punkte











matomo

Datei nicht gefunden!