여전히 connect() 함수를 사용해야 합니까? #React.js

약간의 읽기로 결정하도록 도와주세요…

조금만 검토해 봅시다.

몇 줄의 코드 작성을 시작하겠습니다.

import React from "react";
import { addTodo, deleteTodo } from './actions’

const TodoApp = (addTodo, deleteTodo, todos) => (
//A fantastic code...
);

function mapStateToProps(state) {
  return { todos: state.todos }
}

const mapDispatchToProps = {
  addTodo,
  deleteTodo
}

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

요약하자면!

connect()(Higher-Order Component) 함수는 React 컴포넌트를 Redux 스토어에 연결합니다.
이 함수는 저장소에서 필요한 데이터와 저장소에 작업을 발송하는 데 필요한 함수를 연결된 구성 요소에 제공합니다.

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

연결 기능에는 mapStateToProps 및 mapDispatchToProps 소품이 있습니다.

mapStateToProps 및 mapDispatchToProps는 Redux 스토어를 처리합니다.
연결에 대한 자세한 내용은 공식 문서를 참조하세요.

좋습니다. Connect 함수를 작성하고 싶지 않다면 mapStateToProps 및 mapDispatchToProps 를 대체하는 방법은 무엇입니까?

음, 조금만 더 생각해보자.

어떻게 교체해야 할까요?

이 연결을 작성하지 않으면 여전히 상태에서 소품을 수신해야 하고 여전히 함수를 디스패치하고 싶습니다. 어떻게 이것을 계속 사용할 수 있습니까?

훅이 답이다!

오 친구, 그게 무슨 뜻이야?

후크

구성 요소의 상태 및 부작용을 처리하는 기능은 이제 기능적 구성 요소의 일반적인 패턴입니다.
react-redux 라이브러리는 이제 Redux를 상태 관리 라이브러리로 사용하는 React 및 React Native 앱의 Hooks를 지원합니다.
React Redux는 편재하는 connect()의 대안으로 일련의 Hook API를 제공합니다.

이 후크를 사용합시다!

* useSelector 사용

useSelector는 props에 대한 map state와 동일합니다. 필요한 상태의 일부를 반환하는 함수 인수를 받습니다.

* useDispatch 사용

useDispatch는 props에 대한 맵 디스패치와 동일합니다. useDispatch를 호출하고 이를 변수 dispatch에 저장합니다. Dispatch는 action 폴더에서 가져온 모든 작업과 함께 작동합니다.

코드를 다시 작성해 봅시다!

"반응"에서 반응 가져오기;
import { useDispatch, useSelector } from "react-redux";
import { addTodo, deleteTodo } from './actions'

내보내기 const TodoApp = () => {
const todos = useSelector(state => state.todos);
const dispatch = useDispatch();

return (
//a fantastic code that dispatch actions
(example: dispatch(addTodo()))
);
};

결론:

• The main benefit of using the Redux Hooks is that they are conceptually simpler than wrapping components in the connect higher-order component.

• Another benefit of not using the higher-order component is that you no longer get what I call “Virtual DOM of death” (will be my next article).

• With connect, you are wrapping your component and injecting props into it. While the Redux Hooks have many benefits, there is one benefit of using connect instead of the Redux Hooks, and that is that it keeps your component decoupled from Redux

그것에 대해 어떻게 생각하는지, 연결 기능을 계속 사용하는 것에 대해 나에게 제안하는 것이 무엇인지 댓글로 알려주세요.

참조.

https://es.wikipedia.org/wiki/Steve_Jobs
https://react-redux.js.org/api/connect
https://react-redux.js.org/api/hooks