React-Redux - Kancalar API'sı

React-Redux'nun yeni özelliklerini kullanmak için yeni tepki-redux uygulamamı yapılandırmaya çalışıyorum. Resmi belgeler diyor

React Redux artık mevcut connect () Yüksek Sipariş Bileşenine alternatif olarak bir dizi kanca API'si sunuyor.

Bazı gerçek örneklerle Hooks API ile ilgili bazı yardım makaleleri bulmaya çalışıyorum, ancak tüm tepki-redux Uygulamaları bağlantı işlevini kullanıyor. Resmi belgeler de çok temel örnekleri göstermektedir.

Ben AppSelector (Hooks API tarafından sunulan) ile benim app bağlantı işlevlerini değiştirmek istiyorum.

İşte benim uygulamadan bir örnek kod snippet'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> {
.
.
.
}

Kancalar Sınıf bileşenleriyle uyumlu değildir. Kancaları kullanmak için sınıf bileşenlerini işlev bileşenlerine dönüştürürsünüz. Örneğin, kodunuz yeniden düzenlenebilir

/**
 *  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 fonksiyon bileşenlerini kolaylaştırır, bu yüzden sınıf bileşenimi böyle bir fonksiyon bileşeninin içine yerleştirdim:

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

Benim düşünceme göre, son seviye bileşenleri mağazadan izole tutmak daha iyidir.