Javascript 需要使用react-redux更新无状态组件的状态

我有一个使用react redux连接到存储的组件（为了简单起见，我缩短了代码）：

const地址=（道具）=>{
const{useraddress，removeAddress}=props
让{showEdit}=props
返回(
{userAddresses.map（地址=>(
{地址.名称}

删除
))}
{showEdit=true}}>
新增
{showEdit(
//在这里显示一些编辑内容！！！
)：null}
)
}
常量映射状态=状态=>{
返回{
userAddresses:state.account.userAddresses，
showEdit:false
}
}
常量映射分派=（分派）=>{
返回{
addAddress:address=>dispatch（addUserAddress（address）），
removeAddress:address=>dispatch（removeUserAddress（address）），
}
}
导出默认连接（mapState，mapDispatch）（地址）

---

单击按钮（

添加新内容

）时，将弹出一个表单（标记为

在此处显示一些编辑内容！！！

）。我知道如果

Address

是一个状态组件，那么这很容易做到。但是，我需要使用

react-redux

，据我所知，您必须使用无状态组件才能使用

react-redux

。有人能给我指出正确的方向吗？

为了严格使用redux，当用户单击按钮时，您应该有另一个操作要分派。然后，reducer将更新

showEdit

属性的值，这将导致重新呈现无状态组件，从而允许您有条件地呈现编辑表单

但是，这一信息（编辑表单的可见性与否）对应用程序的其余部分没有用处，因此可能需要将组件转换为有状态组件，并跟踪本地状态下的

showEdit

属性

第三个选项可以是使用

useState

hook，但这取决于您在项目中使用的React版本，因为它们当前处于alpha…

否，您不必“使用无状态/函数组件”来使用React Redux

connect

接受类组件和函数组件（甚至“特殊”的React组件，如

React.memo（）

），它们是否在内部使用组件状态（或挂钩）并不重要

另外，作为补充说明，您可以简化代码：

const-mapspatch={
addAddress:addUserAddress，
removeAddress:removeUserAddress
}

---

（请注意，如果您的道具名称与函数名称相同，则名称可能会更短。）

您可以查看redux表单，以了解标题中固有的讽刺意味。

const Address = (props) => {
    const { userAddresses, removeAddress } = props
    let { showEdit } = props

    return (
        <div>
            {userAddresses.map(address => (
                <div key={address.id}>
                    <p>{address.name}</p>
                    <Button onClick={removeAddress.bind(this, address)}>Delete</Button>
                </div>
            ))}

            <Button
                onClick={() => { showEdit = true }}>
                Add new
            </Button>

            {showEdit ? (
                // show some edit stuff here!!!
            ): null}
        </div>
    )
}

const mapState = state => {
    return {
        userAddresses: state.account.userAddresses,
        showEdit: false
    }
}

const mapDispatch = (dispatch) => {
    return {
        addAddress: address => dispatch(addUserAddress(address)),
        removeAddress: address => dispatch(removeUserAddress(address)),
    }
}

export default connect(mapState, mapDispatch)(Address)