Hello World App for React/Redux - Light, Love , Kingdom of Heaven to the World

So I was thoroughly confused with basics of React-Redux but managed to get the final project working somehow & even somehow had some semblance of clarity during the review (code review). But now that all the immediacy is in the past & redux and react etc. are less relevant things are not so clear. Thanksfully I was able to run into some sources which helped me create a very rudimentary hello world React-Redux app to allow me to grasp the essentials again (and hopefully may help others too).

So following is the most basic react-redux application source code. A detailed step by step setup is in the pdf file in the github repo “React Redux Notes.pdf” . [src]

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

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

import { createStore } from 'redux'

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

const store = createStore(rootReducer)

function Counter () {
  const count = useSelector(state => state.count)
  const dispatch = useDispatch()

  const countUp = { type: 'COUNT_UP' }

  return <div>
    <p>Count: {count}</p>
    <button onClick={() => dispatch(countUp)}>Count Up</button>
  </div>
}

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

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);