typescript에서 react-redux와 함께 반응 후크 사용

1. ReactJS의 후크는 무엇입니까?

2. React redux hooks: 클래스 대 기능적 구성 요소 비교

import * as React from "react";
import { connect } from "react-redux";
import { TReduxStore, TDispatch } from "./types";
import { AxiosPromise } from "axios";
import { getUser } from "./action";

type IStateProps = Pick<TReduxStore, "user">;

interface IDispatchProps {
  getUser: (id: string) => AxiosPromise;
}

interface IProps extends IStateProps, IDispatchProps {}

class ShowUser extends React.Component<IProps> {
  componentDidMount() {
    this.props.getUser("1");
  }

  render() {
    const { user } = this.props;
    return !user ? "Loading..." : <div>User Name: {user.name}</div>;
  }
}

const mapStateToProps = (state: TReduxStore): IStateProps => ({
  user: state.user
});

const mapDispatchToProps = (dispatch: TDispatch): IDispatchProps => ({
  getUser: id => dispatch(getUser(id))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ShowUser);

import * as React from "react";
import { useSelector, useDispatch } from "react-redux";
import { TReduxStore, TDispatch } from "./types";
import { getUser } from "./action";

type IStateProps = Pick<TReduxStore, "user">;

const ShowUser: React.FC = props => {
  const dispatch = useDispatch<TDispatch>();

  const { user } = useSelector<TReduxStore, IStateProps>(state => ({
    user: state.user
  }));

  React.useEffect(() => {
    dispatch(getUser("1"));
  }, [dispatch]);

  return !user ? <div>"Loading..."</div> : <div>User Name: {user.name}</div>;
};

export default ShowUser;

3. 기능 구성 요소에서 useDispatch 및 useSelector react-redux 후크를 사용하는 방법은 무엇입니까?

function (state) {
    return ({
        user: state.user
    })
}