如何创建和命名两个相同的有状态组件，其中一个使用Redux状态，另一个使用本地状态

Question

目前，我有一个名为AsyncButton的按钮，它连接到Redux存储，读取isRequesting布尔值。根据该值，按钮将被禁用并显示LoadingSpinner:

function AsyncButton({ children, ...props }) {
const isRequesting = useSelector(selectIsRequesting);
return (
<Button disabled={isRequesting} {...props}>
{children}
{isRequesting && <LoadingSpinner />}
</Button>
);
}

然而，我现在需要这个按钮的一个相同实例，尽管isRequesting状态是通过props传入的。因此，我认为我应该断开组件与商店的连接，使其具有代表性/愚蠢性，这样它所需要的任何状态都可以钻入其中，例如：

function AsyncButton({ children, isRequesting, ...props }) {
return (
<Button disabled={isRequesting} {...props}>
{children}
{isRequesting && <LoadingSpinner />}
</Button>
);
}

现在，如何命名将把isRequesting从存储传递到AsyncButton的容器组件？例如：

function ConnectedAsyncButton(props) {
const isRequesting = useSelector(selectIsRequesting);
return <AsyncButton {...{isRequesting, ...props}} />
}

在这里，我将其命名为ConnectedAsyncButton，但由于我是Redux的新手，我不确定这是否合适。感谢您的帮助。

Answer 1

将isRequesting作为道具传递给AsyncButton组件，如下代码所示。

function ConnectedAsyncButton(props) {
const isRequesting = useSelector(selectIsRequesting);
return <AsyncButton isRequesting={isRequesting} {...props}} />
}

您正在AsyncButton组件中正确访问isRequesting道具。