Необходимо обновить состояние на компоненте без сохранения состояния с помощью response-redux - PullRequest
Новая
       52

Необходимо обновить состояние на компоненте без сохранения состояния с помощью response-redux

0 голосов
/ 13 января 2019

У меня есть компонент, который подключен к магазину с помощьюact-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. Кто-нибудь может указать мне правильное направление?

Ответы [ 2 ]

0 голосов
/ 13 января 2019

Нет, вы не «должны использовать компонент без состояния / функции», чтобы использовать React-Redux!

connect принимает как компоненты класса, так и компоненты функций (и даже «специальные» компоненты React, такие как React.memo()), и не имеет значения, используют ли они состояние компонента (или перехватчики) внутри или нет.

Кроме того, в качестве примечания вы можете упростить свой код , используя форму «Сокращения объектов» mapDispatch: 

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

(Обратите внимание, что это может быть еще короче, если имена ваших пропилов были названы так же, как функции.)

0 голосов
/ 13 января 2019

Строго придерживаясь избыточности, у вас должно быть другое действие для отправки, когда пользователь нажимает кнопку. Затем редуктор обновит значение свойства showEdit, что вызовет повторную визуализацию вашего компонента без состояния, что позволит вам условно визуализировать форму редактирования.

Но эта информация (видимость или нет формы редактирования) бесполезна для остальной части вашего приложения, поэтому может иметь место преобразование вашего компонента в компонент с отслеживанием состояния и отслеживание свойства showEdit в местное государство.

Третьим вариантом может быть использование useState hook, но это зависит от версии React, которая у вас есть в вашем проекте, потому что они в настоящее время находятся в альфа-версии ...

...