2016-03-02 3 views
3

Я стараюсь следовать правилам документации Redux о компонентах презентации/контейнера и I подключить мои контейнеры с использованием реакции-сокращения connect(). Я использую mapDispatchToProps и bindActionCreators для ввода необходимых действий в реквизит действия. Я никогда не использую второй параметр ownProps.Каковы недостатки использования одного mapDispatchToProps?

Поскольку мое приложение становилось все более сложным, в итоге я получаю много файлов mapDispatchToProps() (по одному для каждого контейнера), которые почти идентичны; они связывают все действия практически со всеми создателями действия.

Так что мне было интересно: какие недостатки будут иметь только одна функция mapDispatchToProps, которая связывает все действия и использует их в каждом контейнере?

Нечто подобное:

import { bindActionCreators } from 'redux' 

import * as EventsActionCreators from '../../actions/EventsActionCreators' 
import * as TagsActionCreators from '../../actions/TagsActionCreators' 
import * as UsersActionCreators from '../../actions/UsersActionCreators' 


export default function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(
     { 
     ...EventsActionCreators, 
     ...TagsActionCreators, 
     ...UsersActionCreators, 
     }, 
     dispatch 
    ), 
    } 
} 

ответ

1

Если ваше приложение достаточно просто, чтобы оправдать это, то я бы сказал, пойти на это. Недостатки, которые я вижу, если таковые имеются, связаны с вашим connects, не являющимся явным, о том, какие действия будут доступны. Чтобы узнать, что доступно, вы должны проверить определение mapDispatchToProps.

Это говорит о том, почему это возможно как функция? mapDispatchToProps может получить объект, поэтому в вашем mapDispatchToProps.js, это будет достаточно:

import * as EventsActionCreators from '../../actions/EventsActionCreators' 
import * as TagsActionCreators from '../../actions/TagsActionCreators' 
import * as UsersActionCreators from '../../actions/UsersActionCreators' 

export default { 
    ...EventsActionCreators, 
    ...TagsActionCreators, 
    ...UsersActionCreators, 
} 

затем

import mapDispatchToProps from './mapDispatchToProps'; 
import SomeComponent from './SomeComponent'; 
export ConnectedComponent = connect(null, mapDispatchToProps)(SomeComponent); 
Смежные вопросы