React-Redux - Hooks API

Saya mencoba mengkonfigurasi aplikasi re-redux baru saya untuk menggunakan fitur baru React-Redux. The dokumentasi resmi mengatakan

React Redux sekarang menawarkan satu set API kait sebagai alternatif untuk connect yang ada () Komponen Orde Tinggi.

Saya telah mencoba untuk menemukan beberapa artikel bantuan yang terkait dengan Hooks API dengan beberapa contoh nyata tetapi semua Aplikasi re-redux menggunakan fungsi connect. Dokumentasi resmi juga menunjukkan contoh yang sangat mendasar.

Saya ingin mengubah fungsi koneksi di Aplikasi saya dengan useSelector (ditawarkan oleh Hooks API).

Berikut ini cuplikan kode contoh dari aplikasi saya.

//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> {
.
.
.
}

Kait tidak kompatibel dengan komponen Class. Untuk menggunakan Hooks, Anda mengonversi komponen kelas menjadi komponen yang berfungsi. Misalnya, kode Anda dapat di refactored ke

/**
 *  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;

Hooks API memfasilitasi komponen fungsi, jadi saya menyarangkan komponen kelas saya di dalam komponen fungsi seperti ini:

//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> {
.
.
.
}

Sesuai persepsi saya, lebih baik untuk menjaga komponen tingkat terakhir terisolasi dari toko.