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;