প্রতিক্রিয়া-রেডাক্স - হুকস এপিআই

Question

আমি প্রতিক্রিয়া-রেডাক্সের নতুন বৈশিষ্ট্যগুলি ব্যবহার করতে আমার নতুন বিক্রিয়া-রিডাক্স অ্যাপ্লিকেশনটি কনফিগার করার চেষ্টা করছি। সরকারী ডকুমেন্টেশন বলেছেন

প্রতিক্রিয়া রেডাক্স এখন বিদ্যমান সংযুক্ত () উচ্চতর অর্ডার উপাদানগুলির বিকল্প হিসাবে হুক এপিআইয়ের একটি সেট সরবরাহ করে।

আমি আসল উদাহরণ সহ হুকস এপিআই সম্পর্কিত কিছু সহায়ক নিবন্ধগুলি সন্ধান করার চেষ্টা করছি তবে সমস্ত প্রতিক্রিয়া-রিডাক্স অ্যাপ্লিকেশনগুলি সংযুক্ত ফাংশন ব্যবহার করছে। অফিসিয়াল ডকুমেন্টেশন খুব বেসিক উদাহরণ দেখায়।

আমি আমার অ্যাপ্লিকেশনটিতে ইউজসিলেক্টর (হুকস এপিআই দ্বারা প্রদত্ত) এর সাথে সংযুক্ত ফাংশনগুলি পরিবর্তন করতে চাই।

আমার অ্যাপ্লিকেশন থেকে কোড উদাহরণ স্নিপেট এখানে।

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

আমার ধারণা অনুসারে, শেষ স্তরের উপাদানগুলি দোকান থেকে বিচ্ছিন্ন রাখা ভাল।