import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Title } from './Title';
import { Text } from './Text';
import { Button } from './Button';

const AppComponent: React.FC = () => {
 const title = useSelector((state: ApplicationState) => state.Reducer1.title);
 const text = useSelector((state: ApplicationState) => state.Reducer1.text);
 const button = useSelector((state: ApplicationState) => state.Reducer1.button);
 const dispatch = useDispatch();

 return (
    <div>
      <Title title={title} />
      <div>
        {text.map((paragraph) => (
          <Text key={paragraph} text={paragraph} />
        ))}
      </div>
      <Button onClick={() => dispatch({ type: 'button_1', text: button })}>
        {button}
      </Button>
    </div>
 );
};

export default AppComponent;