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

不，您不“必须使用无状态/功能组件”来使用React-Redux！

connect既接受类组件又接受函数组件（甚至包括React.memo()之类的“特殊” React组件），并且它们是否在内部使用组件状态（或挂钩）都没有关系。

此外，请注意，您可以简化代码using the "object shorthand" form of mapDispatch：

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

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

Answer 2

为了严格使用redux，当用户单击按钮时，您应该还有另一个要分派的操作。然后，化简器将更新showEdit属性的值，这将导致重新渲染无状态组件，从而允许您有条件地渲染编辑表单。

但是，这是一条信息（是否显示编辑表单）对您的应用程序的其余部分无用，因此可能需要将组件转换为有状态组件并跟踪showEdit处于本地状态的财产。

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

需要使用react-redux

2 个答案: