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

Question

我有一个使用 react-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)

当您单击按钮（ Add new ）时，应该会弹出一个表单（标记为show some edit stuff here!!! ）。 我知道如果Address是一个状态组件，这很容易做到。 但是，我需要使用react-redux ，据我所知，您必须使用无状态组件才能使用react-redux 。 任何人都可以指出我正确的方向吗？

Answer 1

不，你没有“必须使用无状态/功能组件”来使用做出反应，终极版！

connect接受类组件和函数组件（甚至“特殊”的 React 组件，如React.memo() ），并且它们是否在内部使用组件状态（或钩子）并不重要。

此外，作为旁注，您可以使用mapDispatch的“对象速记”形式简化代码：

const mapDispatch = {
    addAddress : addUserAddress,
    removeAddress : removeUserAddress
}

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

Answer 2

保持严格使用 redux，当用户单击按钮时，您应该有另一个动作要调度。 然后，reducer 将更新showEdit属性的值，这将导致重新呈现无状态组件，从而允许您有条件地呈现编辑表单。

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

第三种选择可能是使用useState钩子，但这取决于您项目中的 React 版本，因为它们目前处于 alpha 阶段...