TypeScript con Redux en una aplicación React
La integración de TypeScript con Redux en una aplicación React mejora la seguridad de los tipos y la capacidad de mantenimiento del código. Esta guía explica cómo configurar TypeScript con Redux, incluida la definición de tipos y la integración con componentes React.
Paso 1: Instalar dependencias
Primero, instale los paquetes necesarios para los tipos Redux, React-Redux y TypeScript.
npm install redux react-redux @reduxjs/toolkit
npm install @types/react-redux --save-dev
Paso 2: Configurar la tienda Redux
Cree la tienda Redux con TypeScript. Defina los tipos para el estado y las acciones, y configure la tienda.
import { configureStore } from '@reduxjs/toolkit';
import { rootReducer } from './reducers';
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
const store = configureStore({
reducer: rootReducer,
});
export default store;
Paso 3: Definir acciones y reductores
Cree tipos de acciones, creadores de acciones y reductores. Utilice TypeScript para definir el estado y los tipos de acciones para una tipificación estricta.
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
interface CounterState {
value: number;
}
const initialState: CounterState = {
value: 0,
};
const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
},
incrementByAmount: (state, action: PayloadAction<number>) => {
state.value += action.payload;
},
},
});
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
Paso 4: Conectar Redux a los componentes de React
Utilice los ganchos useSelector
y useDispatch
de React-Redux para conectar el estado de Redux y enviar acciones en los componentes de React.
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from './store';
import { increment, decrement, incrementByAmount } from './counterSlice';
const Counter: React.FC = () => {
const dispatch = useDispatch<AppDispatch>();
const count = useSelector((state: RootState) => state.counter.value);
return (
<div>
<h1>{count}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
<button onClick={() => dispatch(incrementByAmount(10))}>Increment by 10</button>
</div>
);
};
export default Counter;
Paso 5: Integrar Redux Store con React
Envuelva el componente principal de React con el componente Provider
de React-Redux para pasar la tienda Redux a la aplicación.
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
Conclusión
El uso de TypeScript con Redux en una aplicación React proporciona una tipificación sólida y mejora la confiabilidad del código. Si se siguen estos pasos, se puede configurar la tienda Redux con TypeScript, se pueden definir acciones y reductores, y se puede integrar Redux con componentes React.