रिएक्ट-रेडक्स - हुक एपीआई

Question

मैं रिएक्ट-रेडक्स की नई सुविधाओं का उपयोग करने के लिए अपने नए रिएक्ट-रिडक्स एप्लिकेशन को कॉन्फ़िगर करने का प्रयास कर रहा हूं। आधिकारिक दस्तावेज कहते हैं

रिएक्ट Redux अब मौजूदा कनेक्ट () हायर ऑर्डर कंपोनेंट के विकल्प के रूप में हुक एपीआई का एक सेट प्रदान करता है।

मैं कुछ वास्तविक उदाहरणों के साथ हुक एपीआई से संबंधित कुछ मदद करने वाले लेखों को खोजने की कोशिश कर रहा हूं, लेकिन सभी प्रतिक्रिया-रिडक्स एप्लिकेशन कनेक्ट फ़ंक्शन का उपयोग कर रहे हैं। आधिकारिक प्रलेखन भी बहुत बुनियादी उदाहरण दिखाता है।

मैं अपने ऐप में कनेक्टसेक्टर्स को useSelector (हूक्स एपीआई द्वारा प्रस्तावित) के साथ बदलना चाहता हूं।

यहाँ मेरे आवेदन से एक उदाहरण कोड स्निपेट है।

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

Answer 1

हुक क्लास घटकों के साथ संगत नहीं हैं। हुक का उपयोग करने के लिए, आप वर्ग घटकों को कार्य घटकों में परिवर्तित करते हैं। उदाहरण के लिए, आपके कोड को फिर से सक्रिय किया जा सकता है

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

Answer 2

हुक एपीआई कार्य घटकों की सुविधा देता है, इसलिए मैंने अपने कक्षा घटक को फ़ंक्शन घटक के अंदर इस तरह घोंसला बनाया:

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

मेरी धारणा के अनुसार, स्टोर से अंतिम स्तर के घटकों को अलग रखना बेहतर है।