React/redux - прохождение actionCreators на много уровней

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

Например, после этого превосходного учебника по сокращению, если я передам список создателей действий в реквизиты, подобные этому

import Voting from './Voting';
import * as actionCreators from '../action_creators';

...

export const VotingContainer = connect(
    mapStateToProps,
    actionCreators
)(Voting);

то в моем компоненте Voting у меня есть доступ к actionCreators, который действительно крут.

Но если я скажу 20 actionCreators, которые используются в Voting и всех его дочерних компонентах, например.

Voting -> VotingContainer -> VotingDetail -> VotingFoo -> VotingBar

тогда я получаю функции рендеринга, которые выглядят как

class Voting extends React.Component {
    render(){
        <VotingContainer
            actionCreator1={this.props.actionCreator1}
            .
            .
            .
            actionCreator15={this.props.actionCreator15} />
    }
}

class VotingContainer extends React.Component {
    render(){
        <VotingDetail
            actionCreator1={this.props.actionCreator1}
            .
            .
            .
            actionCreator12={this.props.actionCreator12} />
    }
}

.
.
.

class VotingFoo extends React.Component {
    render(){
        <VotingBar
            actionCreator1={this.props.actionCreator1}
            .
            .
            .
            actionCreator6={this.props.actionCreator6} />
    }
}

Есть ли наилучшая практика для этой ситуации, способ группировать actionCreators вместе так или иначе без большого количества шаблонов на каждом шагу? Я ничего не видел ни в одном из уроков/примеров...

Ответы

Ответ 1

Просто подключите компоненты под деревом к Redux тоже.
Мы чрезмерно подчеркиваем "один контейнер наверху" в примерах.
Это имеет смысл, когда речь идет о очень простых приложениях.

Для любого сложного приложения , как только прохождение реквизита становится утомительным, connect() ниже. Я рассказываю об этом в своих бесплатных видео: см. Извлечение компонентов контейнера и следующие несколько видеороликов.

Ответ 2

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

Вы можете сделать это:

<VotingBar {...this.props} />

Что эквивалентно этому:

<VotingBar
    actionCreator1={this.props.actionCreator1}
    .
    .
    .
    actionCreator6={this.props.actionCreator6} />

Ответ 3

Конечно, существует множество способов решения этой проблемы.

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

var store = require('../store');
var actions = require('../actions');

// Somewhere inside your component...
store.dispatch(actions.someAction(data));

Просто убедитесь, что результат ваших создателей действия (т.е. новое состояние) передается через компоненты верхнего уровня. Это позволяет потоку данных быть однонаправленными и понятными.