Правильный способ использования useReducer для обработки открытия / закрытия нескольких диалогов в React - PullRequest
Новая
       9

Правильный способ использования useReducer для обработки открытия / закрытия нескольких диалогов в React

0 голосов
/ 15 октября 2019

Я использую useReducer в функциональном компоненте React, который имеет несколько диалогов.

Он отображает как: 

return (
    <div className="container">

        { /* All Dialogs go here */ }
        <AddProfileDialog open={isOpen.ADD_PROFILE} />
        <EditProfileDialog open={isOpen.EDIT_PROFILE} />
    </div>
)

И я использую хуки для обработки внутренних состояний в этом компоненте.

Мой userReducer выглядит как 

const [isOpen, dispatch] = useReducer((state, action) => {
        switch (action.type) {
            case 'ADD_PROFILE':
                return { ...state, ADD_PROFILE: true }
            case 'EDIT_PROFILE':
                return { ...state, EDIT_PROFILE: false }
            default:
                return state
        }
    }, [])

Прежде всего, я не уверен, что это правильный способ обработки состояния нескольких диалогов.

Кроме того, есть ли способ сбросить состояние всех других диалогов в этом компоненте в состояние по умолчанию (все false), кроме выбранного?

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 15 октября 2019

Вы можете сделать что-то подобное и добавить действие отмены. 

const [isOpen, dispatch] = useReducer((state, action) => {
        switch (action.type) {
            case 'ADD_PROFILE':
                return { ...state, ADD_PROFILE: true, EDIT_PROFILE: false }
            case 'EDIT_PROFILE':
                return { ...state, EDIT_PROFILE: false, ADD_PROFILE: false }
            case 'CANCEL':
                return {...state, EDIT_PROFILE: false, ADD_PROFILE: false }
            default:
                return state
        }
    }, [])
0 голосов
/ 15 октября 2019

Я думаю, что useReducer и useState оба работают в вашей ситуации. но useState может быть проще здесь. Здесь нет сложной логики или побочного эффекта, нам не нужно использовать здесь useReducer. 

const [open, setOpen] = useState({ADD_PROFILE:false,EDIT_PROFILE:false});

setOpen({...open, ADD_PROFILE:!open.ADD_PROFILE})

<div>
  < AddProfileDialog open={open.ADD_PROFILE}/>
  < EditProfileDialog open={open.EDIT_PROFILE}/>
</div>

Однако и useReducer, и useState будут вызывать изменение состояния, каждый раз, когда мы открываем новый диалог, всеОткрытые диалоги по-прежнему будут повторными. Возможно, вы захотите использовать React.memo, если ваш дочерний компонент слишком сложен.

...