React-Redux - Hooks API

ฉันกำลังพยายามกำหนดค่าแอปพลิเคชัน react-redux ใหม่ของฉันเพื่อใช้คุณสมบัติใหม่ของ React-Redux เอกสารอย่างเป็นทางการกล่าวว่า

React Redux เสนอชุด hook API เป็นทางเลือกแทนการเชื่อมต่อ () ส่วนประกอบการสั่งซื้อที่สูงขึ้น

ฉันพยายามค้นหาบทความช่วยเหลือที่เกี่ยวข้องกับ Hooks API ด้วยตัวอย่างจริงบางส่วน แต่แอปปฏิกิริยาตอบสนองทั้งหมดกำลังใช้ฟังก์ชันเชื่อมต่อ เอกสารอย่างเป็นทางการยังแสดงตัวอย่างพื้นฐานมาก

ฉันต้องการเปลี่ยนฟังก์ชั่นเชื่อมต่อในแอพของฉันด้วย useSelector (ให้บริการโดย Hooks API)

นี่คือตัวอย่างโค้ดจากแอปพลิเคชันของฉัน

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

Hooks ไม่สามารถใช้งานได้กับส่วนประกอบระดับ ในการใช้ Hooks คุณสามารถแปลงส่วนประกอบของคลาสเป็นฟังก์ชันส่วนประกอบได้ ตัวอย่างเช่นรหัสของคุณสามารถ refactored

/**
 *  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 อำนวยความสะดวกในการใช้งานฟังก์ชั่นดังนั้นฉันจึงซ้อนส่วนประกอบชั้นเรียนของฉันภายในองค์ประกอบฟังก์ชั่นเช่นนี้:

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

ตามการรับรู้ของฉันจะดีกว่าที่จะแยกส่วนประกอบระดับสุดท้ายออกจากร้านค้า