import react from 'react';
import { actions } from '../store/store';
import { useDispatch, useSelector } from 'react-redux';
import { IonButton } from '@ionic/react';

const Test: react.FC<{}> = () => {
  console.log('Rendering <Test />');

  const dispatch = useDispatch();

  const state = useSelector((state: { test: any }) => state.test.part1);

  return (
    <div>
      <p>{state.title}</p>
      <IonButton color='danger' onClick={() => dispatch(actions.increment1())}>
        Increment 1 (and re-render)
      </IonButton>
      <IonButton color='primary' onClick={() => dispatch(actions.increment2())}>
        Increment 2 (no re-rendering)
      </IonButton>
    </div>
  );
};

export default Test;