Как работает react + redux?

Question

[Анастасия Панфилова]

Доброго времени суток. Должна предупредить, что я в react новичок и заранее извиняюсь за глупый вопрос.
Погуглив что такое react и с чем его едят решила написать react приложение с использованием redux и router (react-router-redux^5.0.0-alpha.6)
И тут я поняла, что, видимо, не до конца осознаю как работает redux. Грубо говоря, у меня в приложении есть хедер(выдвижное меню навигации) и контент(туда выводиться содержимое страниц в зависимости от пути).

Header - умный контейнер, в котором функция connect берёт только необходимые части store для меню навигации и navigationActions.
SwitchContainer - там роуты, которые рендерят необходимые "умные" компоненты в зависимости от адреса страницы. В каждом таком "умном" компоненты так же есть connect, которая берёт только нужные части store (навигацией там и не пахло)

class App extends Component {

    constructor(props){
        super(props);
    }

    render() {
        return (
            <div className="component-app">
                <Header />
                <div className="all-wrapper">
                    <div className="main-content">
                        <SwitchContainer />
                    </div>
                </div>
            </div>
        )
    }
}

Почему когда я использую функции navigationActions, которые меняют только те части состояния, что связаны с меню навигацией, на это так же реагируют другие компоненты, в которые не поступают части store, связанные с навигацией?

Надеюсь, понятно изложила свою мысль.
Скорее всего я что-то не так делаю? Может быть в store не должно храниться состояние отдельных страниц, а только общее состояние приложения? Неправильно что-то использую? Помогите пожалуйста

Comments

[alvvi]

реагируют другие компоненты,

Не очень ясно, что вы имеете в виду, кто именно реагирует и как?

Answer 1

[Александр Гонтарев]

конкретно с пакетом react-router-redux я не работал, но похоже вот на что:
Редакс редюсеры - это чистые функции, которые возвращают новый объект, это означает, что когда вы вызываете экшен navigationActions, который в свою очередь вызывает редюсер, то в итоге получаете новый state, а т.к. другие ваши компоненты используют state, то для них этот state тоже новый, и происходит ререндер, чтобы не происходило лишних ререндеров, вам поможет метод shouldComponentUpdate или PureComponent

Comments

[Анастасия Панфилова]

да, примерно так себе и представляла причину, но не знала как искать решение
использовала PureComponent вместо Component, спасибо вам огромное! Помогло )