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