How to use redux

I’m trying a simple increment decrement counter app using redux. But unfortunately, it’s not working properly. It displays 0 but when I either increment or decrement, the value is not printed. Its showing as undefined when i display on console.

Can you tell what is wrong here and what changes do i need to make?

Index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './components/reducer';
let store = createStore(reducer);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store = {store}>
     <App />
  </Provider>
);
reportWebVitals();

App.js:
import React from "react";
import {BrowserRouter,Routes,Route} from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import IncrementDecrement from "./components/IncrementDecrement";
function App() {
return (
    <>
    <BrowserRouter>
    <Routes>
        <Route exact path="/" element={<Home/>}/>
        <Route exact path="/about" element={<About/>}/>
    <Route exact path="/incrementdecrement" element={<IncrementDecrement/>}/>
    </Routes>
    </BrowserRouter>
    </>
);
}
export default App;

components/About.js:
import React from 'react';
import {useNavigate} from "react-router-dom"
const About = () => {
const navigate = useNavigate();
return (
<>
    <h1 style={{color:"blue"}}>About</h1>
    <button onClick={()=>navigate(-1)}>Go Back Home</button>
</>
)
};
export default About;

components/Home.js:
import React from 'react';
import {useNavigate} from "react-router-dom"
const Home = () => {
const navigate = useNavigate();
    return (
    <>
        <h1 style={{color:"blue"}}>Home</h1>
        <button onClick={()=>navigate("/about")}>About</button>
        <button onClick={()=>navigate("/incrementdecrement")}>IncDec</button>
    </>
)
};
export default Home;

components/IncrementDecrement.js:
import React from 'react';
import {useNavigate} from "react-router-dom"
import { useSelector, useDispatch } from 'react-redux';
const IncrementDecrement = () => {
const navigate = useNavigate();
const count = useSelector((state) => state.count);
const dispatch = useDispatch();
const increment = () => {
    dispatch({ type : "INCREMENT" });
}
const decrement = () => {
    dispatch({ type : "DECREMENT" });
}
return (
<div>
    <h1 style={{color:"blue"}}>Increment Decrement</h1>
    <button onClick={()=>navigate(-1)}>Go Back Home</button>
    <div className="App mt-5">
        <button onClick={increment} className="btn btn-success mr-5">
          Increment
        </button>
        <button onClick={decrement} className="btn btn-danger">
          Decrement
        </button>
        <h2 className="mt-5 display-1">{count}</h2>
      </div>
</div>
)
};
export default IncrementDecrement;

components/reducer.js:
let initialState = { count : 0}
function reducer ( state = initialState, action) {
    switch ( action.type ){
        case "INCREMENT" :  return state.count+1;
        case "DECREMENT" : return state.count-1;
        default : return state;
    }
}
export default reducer;

>Solution :

let initialState = { count : 0}
function reducer ( state = initialState, action) {
    switch ( action.type ){
        case "INCREMENT" :  return state.count+1;
        case "DECREMENT" : return state.count-1;
        default : return state;
    }
}
export default reducer;
reactjs

change the above code to this

let initialState = { count : 0}
function reducer ( state = initialState, action) {
    switch ( action.type ){
        case "INCREMENT" :  return {count: state.count+1};
        case "DECREMENT" : return {count: state.count-1};
        default : return state;
    }
}