React-Redux - Hooks API

Question

我正在尝试配置我的新react redux应用程序，以使用react redux的新功能。官方文件显示

React Redux现在提供了一组钩子API，作为现有connect((高阶组件的替代方案。

我一直试图找到一些与Hooks API相关的帮助文章，并提供一些真实的示例，但所有react-redux应用程序都使用连接功能。官方文件也显示了非常基本的例子。

我想用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> {
.
.
.
}

Answer 1

钩子与class组件不兼容。要使用Hooks，可以将类组件转换为功能组件。例如，您的代码可以重构为

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

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

根据我的看法，最好将最后一级组件与商店隔离。