connect 라는 redux HOC 사용 개념에 익숙할 것입니다. 아마도 다음과 같을 것입니다(약어).

import { getUsers, resetUsers } from 'actions/users';
import { selectUsers } from 'store/users';

const App = ({ users, getUsers, resetUsers }) => {
  useEffect(() => {
    getUsers();

    return () => resetUsers();
  }, [getUsers])

  ...
}

App.propTypes = {
  users: PropTypes.arrayOf(PropTypes.object),
  getUsers: PropTypes.func.isRequired,
  resetUsers: PropTypes.func.isRequired,
};

const mapStateToProps = { users: selectUsers() };
const mapDispatchToProps = { getUsers, resetUsers };

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

redux의 connect HOC를 사용하여 <App /> 구성 요소에 getUsers , resetUsers 및 users 소품을 제공하는 간단한 구성 요소입니다.

후크가 코드를 단순화하는 방법을 살펴보겠습니다.

코드 분석:

1. 수입

코드의 이 부분에서는 mapStateToProps 및 mapDispatchToProps에 사용된 작업 및 선택기를 가져옵니다.

import { getUsers, resetUsers } from 'actions/users';
import { selectUsers } from 'store/users';

2. 컴포넌트 자체

코드의 이 부분에서는 App 구성 요소를 정의하고 소품에서 users , getUsers & resetUsers를 분해합니다. 간단한 useEffect 후크를 사용하여 마운트 시 사용자를 호출하고 마운트 해제 시 재설정합니다.

const App = ({ users, getUsers, resetUsers }) => {
  useEffect(() => {
    getUsers();

    return () => resetUsers();
  }, [getUsers])

  ...
}

3. 소품 유형

코드의 이 부분에서는 구성 요소에서 사용하는 소품 유형을 정의합니다.

App.propTypes = {
  users: PropTypes.arrayOf(PropTypes.object),
  getUsers: PropTypes.func.isRequired,
  resetUsers: PropTypes.func.isRequired,
};

4. HOC 연결

코드의 이 부분에서는 mapStateToProps 및 mapDispatchToProps ~ connect 상위 구성 요소를 활용하고 있습니다.

const mapStateToProps = { users: selectUsers() };
const mapDispatchToProps = { getUsers, resetUsers };

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

react-redux 후크 사용

HOC 대신 후크를 사용한다면 다음과 같이 됩니다.

import { useSelector, shallowEqual, useDispatch } from 'react-redux';

import { getUsers, resetUsers } from 'actions/users';
import { selectUsers } from 'store/users';

const App = () => {
  const dispatch = useDispatch();
  const users = useSelector(selectUsers(), shallowEqual)

  useEffect(() => {
    dispatch(getUsers());

    return () => dispatch(resetUsers());
  }, [getUsers, dispatch])

  ...
}

export default App;

코드가 훨씬 더 깨끗하고 깔끔하며 더 적은 코드로 구현이 완료되는 방법을 알고 계십니까?

react-redux 후크를 사용하여 mapDispatchToProps 및 mapStateToProps 상수와 구성 요소의 HOC 래핑에 대한 필요성을 제거했습니다.

추가 구현은 redux 논리를 처리하기 위해 사용자 지정 후크를 구현하는 것일 수 있으며 다음과 같이 사용됩니다.

import { useSelector, shallowEqual, useDispatch } from 'react-redux';

import { getUsers, resetUsers } from 'actions/users';
import { selectUsers } from 'store/users';

export const useAppStore = () => {
  const dispatch = useDispatch();
  const users = useSelector(selectUsers(), shallowEqual);

  const actions = useMemo(() => ({
    getUsers: dispatch(getUsers()),
    resetUsers: dispatch(resetUsers()),
  }), [dispatch]);

  return { users, actions }
}

import { useAppStore } from './hooks';

const App = () => {
  const { users, actions } = useAppStore();

  useEffect(() => {
    actions.getUsers()

    return () => actions.resetUsers()
  }, [actions.getUsers, actions.resetUsers])

  ...
}

이를 통해 관심사 분리를 달성했습니다.

결론

React hooks는 오래된 문제를 해결하는 많은 새로운 방법을 제공합니다. 그 중 하나는 redux의 선택자 및 작업 디스패치입니다. 사용 중인 대부분의 HOC 라이브러리는 후크도 제공합니다. 코드베이스를 최신 상태로 유지하려면 패키지를 업데이트하고 후크 구현 튜토리얼에 대한 문서를 확인하세요!