<div id="root"></div>

// アクションの定義
const COUNT_INCREMENT = "count/increment";

// リデューサーの定義
const count = (state = 0, action) => {
  switch (action.type) {
    case COUNT_INCREMENT: {
      // 2. 値をインクリメントし、returnでストアを更新
      return state + 1;
      break;
    }
    default:
      return state;
  }
};

// ストアの作成
const store = Redux.createStore(Redux.combineReducers({ count }));

const Component = () => {
  const count = ReactRedux.useSelector(state => state.count)
  const dispatch = ReactRedux.useDispatch()
  
  return (
    <>
      {/* 3. ストアが更新されると、コンポーネントが際レンダリングされ、ビューを更新 */}
      <p>{count}</p>
      {/* 1. ボタンクリックでActionをDispatch(発行)　*/}
      <button onClick={() => dispatch({ type: COUNT_INCREMENT })}>
        click
      </button>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  //  ストアの変更を検知し、ビューイベント発火（レンダル）をするために対象のコンポーネントをラッピング 
  <ReactRedux.Provider store={store}>
    <Component />
  </ReactRedux.Provider>
);