Каков наилучший способ обработки выбора элементов Nav?

Question

Я использую React + Redux для одного из моих приложений. Где я хочу иметь Nav, с 2 пунктами Nav. Я хочу обработать изменение элемента Nav на основе действий пользователя.

Я планирую использовать свое хранилище избыточных данных, чтобы иметь состояние для этого, чтобы обрабатывать это изменение. Это хороший подход или, пожалуйста, направьте меня к лучшему решению. Я новичок в этом.

Мой Nav будет выглядеть примерно так

<Nav {...props} activeKey={active} onSelect={onSelect} style={styles} appearance="subtle" justified>
    <Nav.Item eventKey="nav-1">
        Nav 1
    </Nav.Item>
    <Nav.Item eventKey="nav-2" >
        Nav 2
    </Nav.Item>
</Nav>

(для этого используется rsuite js)

Мое начальное состояние магазина будетбыть примерно таким

const initialState = {
    selectedNav: 'nav-1'
};

Answer 1

да, я думаю, что вы на правильном пути, но Nav 1 и Nav 2 не должны знать о состоянии, которое родительский Компонент

• передает в качестве реквизита родительскому Nav. и затем визуализируйте выбранную Nav из реквизита элемента.

<Nav  onSelect={onSelect} style={styles} appearance="subtle" justified>
    {props.selectedNav === 'nav-1' && (
        <Nav.Item eventKey="nav-1">
            Nav 1
        </Nav.Item>
    )}
    {props.selectedNav === 'nav-2' && (
        <Nav.Item eventKey="nav-2" >
          Nav 2
        </Nav.Item>
    )}
</Nav>

и сделайте глобальное действие для взаимодействия с пользователем, чтобы изменить активный неф.

Примечание: выможно использовать другой подход для более чистого кода, обернув Nav 1 и Nav 2 в компонент switch и отобразив активный.