Mergulhe no mundo do desenvolvimento web moderno criando um aplicativo de contador simples usando React e Redux Toolkit. Este exemplo irá guiá-lo através do essencial: configurar uma loja Redux, incorporar uma fatia para funcionalidade de contador e utilizar esse estado em um componente React.
Etapa 1: configuração do projeto
Comece garantindo que você tenha um ambiente React pronto. Caso contrário, você pode configurar um rapidamente usando o aplicativo Create React:
npx create-react-app redux-counter-example
cd redux-counter-example
Assim que o ambiente do seu projeto estiver pronto, instale o Redux Toolkit e o React-Redux para gerenciamento de estado:
npm install @reduxjs/toolkit react-redux
Etapa 2: elaborando o Redux Store e o Counter Slice
Crie a Loja:
No seu projeto src diretório, inicie um store.js arquivo:
// src/store.js
import { configureStore } from '@reduxjs/toolkit';
export const store = configureStore({ reducer: {} });
Adicione uma fatia de contador:
Em seguida, desenvolva uma contra-fatia criando um counterSlice.js arquivo no mesmo diretório:
// src/counterSlice.js
importar {createSlice} de '@reduxjs/toolkit';
exportar const counterSlice = createSlice({
nome: 'contador',
estadoinicial: {valor: 0},
redutores: {
incremento: estado => { estado.valor += 1; },
decremento: estado => {estado.valor -= 1; }
},
});
exportar const {incremento, decremento} = counterSlice.actions;
exportar counterSlice.reducer padrão;
Integre o contador redutor na configuração da sua loja em store.js :
// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
export const store = configureStore({
reducer: { counter: counterReducer },
});
Etapa 3: Integrando a Redux Store ao seu aplicativo
Atualizar src/index.js para envolver seu aplicativo React com o Redux Provider, tornando a loja acessível em:
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
importar './index.css';
importar aplicativo de './App';
importar {loja} de './loja';
importar {Provedor} de 'react-redux';
ReactDOM.render(
<React.StrictMode>
<Loja do provedor={loja}><App /></Provider>
</React.StrictMode>,
document.getElementById('raiz')
);
Etapa 4: Construindo o Componente do Contador
Construa um Counter.js componente dentro do src diretório para fazer interface com o armazenamento Redux:
// src/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';
export function Counter() {
const count = useSelector(state => state.counter.value);
the dispatch = useDispatch();
return (
<div>
<div>Count: {count}</div>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrementar</button>
</div>
);
}
Etapa 5: Incorporando o componente contador no aplicativo
Em src/App.js , inclua o Counter componente para dar vida ao seu aplicativo:
// src/App.js
import React from 'react';
import './App.css';
import { Counter } from './Counter';
function App() {
return (
<div className="App">
<header className="App-header"><Counter /></header>
</div>
);
}
export default App;
Executando seu aplicativo
Está tudo pronto! Inicie seu aplicativo e veja o contador em ação:
npm start
Este aplicativo exemplifica como o Redux Toolkit simplifica o gerenciamento de estado em aplicativos React, apresentando uma maneira elegante de aumentar e diminuir o valor de um contador. Os componentes React interagem suavemente com o estado Redux, tornando o aplicativo de contador funcional e educacional.
Explore o código completo no GitHub em icpmtech/react-redux-tutorial para obter mais insights e implementação detalhada.
