web-dev-qa-db-ja.com

React-Redux-フックAPI

React-Reduxの新機能を使用するように新しいreact-reduxアプリケーションを構成しようとしています。 公式ドキュメント は言う

React Reduxは現在、既存のconnect（）高次コンポーネントの代わりとして一連のフックAPIを提供しています。

私はいくつかの実際の例でHooks APIに関連するいくつかのヘルプ記事を見つけようとしましたが、すべてのreact-reduxアプリは接続機能を使用しています。公式ドキュメントにも非常に基本的な例が示されています。

useSelector（フック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> {
.
.
.
}
reactjstypescriptreduxreact-redux
9
MuhammadUmarFarooq

フック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> {
.
.
.
}

私の認識では、ストアから最後のレベルのコンポーネントを分離することをお勧めします。

0
MuhammadUmarFarooq