npx create-react-app my-app
npm install react-redux @reduxjs/toolkit
//Create a file named src/app/store.js
//Import the configureStore API from Redux Toolkit
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from '../features/counter/counterSlice';
export const store = configureStore({
reducer: {
counter: counterReducer
}
})
//Once the store is created, we can make it available to our React components by putting a React-Redux <Provider> around our application in src/index.js. Import the Redux store we just created, put a <Provider> around your <App>, and pass the store as a prop:
//En el index.js
import { store } from './app/store';
import { Provider } from 'react-redux';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
//Add a new file named src/features/counter/counterSlice.js. In that file, import the createSlice API from Redux Toolkit.
//En features/counter/counterSlice.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
count: 0
}
export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
state.count += 1;
},
decrement: (state) => {
state.count -= 1;
},
reset: (state) => {
state.count = 0;
},
incrementByAmount: (state, action) => {
state.count += action.payload;
}
}
});
export const { increment, decrement, reset, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
//Add Slice Reducers to the Store
//Use Redux State and Actions in React Components
//Counter
import { useSelector, useDispatch } from 'react-redux';
import {
increment,
decrement,
reset,
incrementByAmount }
from './counterSlice';
import { useState } from "react";
const Counter = () => {
const count = useSelector((state) => state.counter.count);
const dispatch = useDispatch();
const [incrementAmount, setIncrementAmount] = useState(0);
const addValue = Number(incrementAmount || 0);
const resetAll = () => {
setIncrementAmount(0);
dispatch(reset());
}
return (
<section>
<p>{count}</p>
<div>
<button onClick={() => dispatch(increment())}>+</button>
<button onClick={() => dispatch(decrement())}>-</button>
</div>
<input
type="text"
value = {incrementAmount}
onChange={(e) => setIncrementAmount(e.target.value)}
/>
<button onClick={() => dispatch(incrementByAmount(addValue))}>Add Amount</button>
<button onClick={resetAll}>Reset</button>
</section>
);
}
export default Counter;
