React-Redux - Móc API

Tôi đang cố gắng định cấu hình ứng dụng Reac-redux mới của mình để sử dụng các tính năng mới của React-Redux. Các tài liệu chính thức nói

React Redux hiện cung cấp một bộ API hook thay thế cho Thành phần bậc cao kết nối () hiện có.

Tôi đã cố gắng tìm một số bài viết trợ giúp liên quan đến API API với một số ví dụ thực tế nhưng tất cả các Ứng dụng phản ứng lại đang sử dụng chức năng kết nối. Tài liệu chính thức cũng cho thấy các ví dụ rất cơ bản.

Tôi muốn thay đổi các chức năng kết nối trong Ứng dụng của mình bằng useSelector (được cung cấp bởi API API).

Đây là một đoạn mã ví dụ từ ứng dụng của tôi.

//MessagesListContainer
export default connect(
  // mapStateToProps
  (state:State) => ({
    activeUser: getActiveUser(state),   
    messages: getMessagesList(state),   
  })
)(MessagesList)

//Selectors
export const getActiveUser = (state: State) => state.activeUser;
export const getMessagesList = (state : State) => (
  Object.keys(state.messages).map((key : any)=> state.messages[key])
)

export interface IMessagesListProps {
  activeUser?: User;
  messages?: Message[];
}
/**
 *  Messages List
 */
export default class MessagesList extends PureComponent<IMessagesListProps> {
.
.
.
}

Móc không tương thích với các thành phần Class. Để sử dụng Hook, bạn chuyển đổi các thành phần lớp thành các thành phần chức năng. Chẳng hạn, mã của bạn có thể được tái cấu trúc thành

/**
 *  Messages List
 */

const getActiveUser = (state: State) => state.activeUser;
const getMessagesList = (state : State) => (Object.keys(state.messages).map((key : any)=> state.messages[key]));

const MessagesList: React.FC = () => {
  const activeUser = useSelector(getActiveUser);
  const messagesList = useSelector(getMessagesList);

  ....
}

export default MessagesList;

API API tạo điều kiện cho các thành phần chức năng, vì vậy tôi đã lồng thành phần lớp của mình bên trong một thành phần chức năng như thế này:

//messages-list.container.tsx
//MessagesListContainer
export const MessagesListContainer = () => {
   const activeUser= useSelector((state:State) => getActiveUser(state));
   const messages= useSelector((state:State) => getMessagesList(state));
   return <MessagesList activeUser={activeUser} messages={messages} />
}


//Selectors
export const getActiveUser = (state: State) => state.activeUser;
export const getMessagesList = (state : State) => (
  Object.keys(state.messages).map((key : any)=> state.messages[key])
)

//end of messages-list.container.tsx

//messages-list.component.tsx
export interface IMessagesListProps {
  activeUser?: User;
  messages?: Message[];
}
/**
 *  Messages List
 */
export default class MessagesList extends PureComponent<IMessagesListProps> {
.
.
.
}

Theo nhận thức của tôi, tốt hơn là giữ các thành phần cấp cuối cùng được cách ly khỏi cửa hàng.