Contador Redux

Contador Redux.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

import { Provider, useSelector, useDispatch } from 'react-redux'
import { createStore } from 'redux'

const rootReducer = (state = {count: 0}, action) => {
  switch(action.type) {
    case 'INCREMENTAR_CONTADOR':
      return { ...state, count: state.count + 1}
    case 'DECREMENTAR_CONTADOR':
      return { ...state, count: state.count - 1}
    case 'RESETEAR_CONTADOR':
      return { ...state, count: 0 }
    default:
      return state
  }
}

const store = createStore(rootReducer)

function Contador() {
  // trae al propiedad `count` del store
  const count = useSelector(state => state.count)

  // define el despachador
  const dispatch = useDispatch()

  // definir mis acciones
  const incrementarContador = { type: "INCREMENTAR_CONTADOR" }
  const decrementarContador = { type: "DECREMENTAR_CONTADOR" }
  const resetearContador = { type: "RESETEAR_CONTADOR", value: 0 }

  return <div>
    <h2>Contador: {count}</h2>
    <button onClick={()=>dispatch(incrementarContador)}>Incrementar</button>
    <button onClick={()=>dispatch(decrementarContador)}>Decrementar</button>
    <button onClick={()=>dispatch(resetearContador)}>Reset</button>
  </div>
}

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <h1>Contador Redux</h1>
        <Contador />
      </div>
    </Provider>
  );
}

export default App;