sandbox/redux-and-rendering/src/components/Test.tsx

27 lines
712 B
TypeScript

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;