Как правильно прсоеденить State и Компоненту?

Question

[Mariik]

Привет.

В пакете 'react-redux' есть функция connect. На вход они принимает функцию mapStateToProps которая связывает компонент реакта с состоянием.

/* Где-то тут у нас компонент App */

let mapStateToProps = (state, ownpops)=>{
  return {
    tracks:state.tracks
  };
}

export default connect(mapStateToProps)(App);

Но нигде в примерах я не нахожу как правильно ее использовать для связи множественных и вложенных компонентов. Вот как мне указать какому именно компоненту какой кусок стейта выдать?

А если у меня для примера такая вложенность:

<Router> 
    <App>
        <Dashboard></Dashboard>
        <Tracks></Tracks>
        <Profile>
             <Settings></Settings>
            <Subscription></Subscription>
        </Profile>
    </App>
</Router>

Мне как лучше почтупать? connect вызывать самому для каждого кмпонента? Или принмать стейт только в верхний компонент и самому его спускать по пропсам вниз? Или как-то вообще по другому?

Answer 1

[alvvi]

Все ведь есть в официальном туториале: redux.js.org/docs/basics/UsageWithReact.html
Если кратко: есть контейнеры и обычные, 'dumb' компоненты, контейнеры взаимодейсйтвуют со Store, диспатчат экшены и т.д., а обычные компоненты лишь рендерят то, что получают через props.

Comments

[Mariik]

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

[alvvi]

Mariik: окей, сори, пропустил конец вашего вопроса, поэтому криво ответил.

Мне как лучше почтупать? connect вызывать самому для каждого кмпонента? Или принмать стейт только в верхний компонент и самому его спускать по пропсам вниз? Или как-то вообще по другому?

Это вопрос дискуссионный, технически вы можете вызывать connect() хоть в каждом компоненте, с точки зрения производительности вы скорее всего даже выиграете, поскольку при передаче стейта сверху может порисходить много ненужного ререндеринга. (Особенно, если вы передаете стейт очень глубоко). В то же время, иногда в этом просто нет необходимости, поэтому можно задать себе такой вопрос: будет ли компонент использовать стейт, или всего лишь передаст его дальше? Если компонент передает слишком много стейтов, но не использует их сам - самое время создать новый контейнер.
Подробнее + ссылка на обсуждение: тут

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

Ну если вы уже решили, что стейт будет привязан только к одному контейнеру, то естественно компоненты ниже получат стейт в props, а как иначе?