app.tsx

import React from "react";
import { useDispatch, useSelector } from "react-redux";

const increment1 = () => (dispatch, getState) => {
  dispatch({ type: "INCREMENT" });
};

const increment2 = () => (dispatch, getState) => {
  dispatch({ type: "INCREMENT" });
  dispatch({ type: "INCREMENT" });
  dispatch({ type: "INCREMENT" });
  dispatch({ type: "INCREMENT" });
};

const increment3 = () => async (dispatch, getState) => {
  dispatch({ type: "INCREMENT" });
  console.log(getState());
  dispatch({ type: "INCREMENT" });
  console.log(getState());
  dispatch({ type: "INCREMENT" });
  console.log(getState());
  dispatch({ type: "INCREMENT" });
  console.log(getState());
};

const increment4 = () => async (dispatch, getState) => {
  dispatch({ type: "INCREMENT" });
  console.log(getState());
  dispatch({ type: "INCREMENT" });
  console.log(getState());
  dispatch({ type: "INCREMENT" });
  console.log(getState());
  dispatch({ type: "INCREMENT" });
  console.log(getState());
};

const increment5 = () => async (dispatch, getState) => {
  await new Promise((resolve) => setTimeout(resolve, 1));
  dispatch({ type: "INCREMENT" });
  console.log(getState());
  dispatch({ type: "INCREMENT" });
  console.log(getState());
  dispatch({ type: "INCREMENT" });
  console.log(getState());
  dispatch({ type: "INCREMENT" });
  console.log(getState());
};

const increment6 = () => async (dispatch, getState) => {
  dispatch({ type: "INCREMENT" });
  console.log(getState());
  dispatch({ type: "INCREMENT" });
  console.log(getState());
  await new Promise((resolve) => setTimeout(resolve, 1));
  dispatch({ type: "INCREMENT" });
  console.log(getState());
  dispatch({ type: "INCREMENT" });
  console.log(getState());
};

const App = () => {
  console.log("render");
  const dispatch = useDispatch();
  const value = useSelector((state: any) => state.value);
  const style = {
    marginTop: "10px",
    fontSize: "40px",
  };
  return (
    <div
      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
    >
      <button style={style} onClick={() => dispatch(increment1())}>
        dispatch 1
      </button>
      <button style={style} onClick={() => dispatch(increment2())}>
        dispatch 2
      </button>
      <button style={style} onClick={() => dispatch(increment3())}>
        dispatch 3
      </button>
      <button style={style} onClick={() => dispatch(increment4())}>
        dispatch 4
      </button>
      <button style={style} onClick={() => dispatch(increment5())}>
        dispatch 5
      </button>
      <button style={style} onClick={() => dispatch(increment6())}>
        dispatch 6
      </button>
      <div style={style}>data: {JSON.stringify(value)}</div>
    </div>
  );
};

export default App;