需要使用 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

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

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

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

Answer 2

不，你不 "have to use a stateless/function component" 使用 React-Redux！

connect既接受class组件也接受函数组件（甚至"special"像React.memo()这样的React组件），它们是否使用组件状态并不重要（或挂钩）是否在里面。

此外，作为旁注，您可以简化代码 using the "object shorthand" form of mapDispatch:

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

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

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

Need to update state on stateless component using react-redux

javascript

reactjs

redux

react-redux

react-props