将调度注入将调用操作的组件时，最有效的方法是什么？

Question

将它直接连接到这些组件中，或者在父组件中进行连接并传递道具。最后一个似乎更优化，您只需创建一个连接实例。你怎么看？

举个例子：

在子组件中注入

const MenuIcon = connect()(({
  dispatch
}) => (
  <IconButton onClick={ () => dispatch(reverseLeftMenu())} touch>
    <ImageDehaze />
  </IconButton>
))

const CreateIcon = connect()(({
  dispatch
}) => (
  <IconButton onClick={() => dispatch(reverseCreateMenu())} touch>
    <ContentAdd />
  </IconButton>
))

const ClientIcons = connect()(({
  dispatch
}) => (
  <div>
    <IconButton onClick={() => dispatch(reverseFavouriteMenu())}>
      <ActionFavorite/>
    </IconButton>
    <IconButton onClick={() => dispatch(reverseCartMenu())}>
      <ActionShoppingCart/>
    </IconButton>
  </div>
))

const RightIcons = ({
  isAdmin
}) => ( isAdmin ? 
  <CreateIcon/>
   : 
  <ClientIcons/>
)

const Header = ({
  isAdmin = false
}) => (
  <Toolbar style={style.bar}>
    <ToolbarGroup float="left" firstChild>
      <MenuIcon/>
    </ToolbarGroup>
    <ToolbarTitle text="TUDELARTE"/>
    <ToolbarGroup float="right" lastChild>
      <RightIcons isAdmin={isAdmin}/>
    </ToolbarGroup>
  </Toolbar>
)

Header.propTypes = {
  isAdmin: React.PropTypes.bool
}

export default Header

在父组件（Header）中连接

const MenuIcon = ({
  dispatch
}) => (
  <IconButton onClick={ () => dispatch(reverseLeftMenu())} touch>
    <ImageDehaze />
  </IconButton>
)

const CreateIcon = ({
  dispatch
}) => (
  <IconButton onClick={() => dispatch(reverseCreateMenu())} touch>
    <ContentAdd />
  </IconButton>
)

const ClientIcons = ({
  dispatch
}) => (
  <div>
    <IconButton onClick={() => dispatch(reverseFavouriteMenu())}>
      <ActionFavorite/>
    </IconButton>  
    <IconButton onClick={() => dispatch(reverseCartMenu())}>
      <ActionShoppingCart/>
    </IconButton>
  </div>
)

const RightIcons = ({
  isAdmin,
  dispatch
}) => ( isAdmin ? 
  <CreateIcon dispatch={dispatch}/>
   : 
  <ClientIcons dispatch={dispatch}/>
)

const Header = ({
  isAdmin = false,
  dispatch
}) => (
  <Toolbar style={style.bar}>
    <ToolbarGroup float="left" firstChild>
      <MenuIcon dispatch={dispatch}/>
    </ToolbarGroup>
    <ToolbarTitle text="TUDELARTE"/>
    <ToolbarGroup float="right" lastChild>
      <RightIcons dispatch={dispatch} isAdmin={isAdmin}/>
    </ToolbarGroup>
  </Toolbar>
)

Header.propTypes = {
  isAdmin: React.PropTypes.bool
}

export default connect()(Header)

Answer 1

这是一个非常基于意见的答案，因为它可能不是最有效的方式，但我肯定更喜欢第二种方式。我不认为这里需要连接您的组件来访问调度功能。将功能作为 props 传递还可以使您的代码具有更高的可重用性，因为父组件现在可以通过将功能作为 props 传递来控制子组件。

我也不会注入完整的调度，但可能只注入已经绑定的动作 mapDispatchToProps。

看起来像这样（未经测试的代码！）：

import * as MenuActionCreators from './MenuActionCreators';
import { bindActionCreators } from 'redux;'


const MenuIcon = ({
    onClickAction
    }) => (
    <IconButton onClick={onClickAction} touch>
        <ImageDehaze />
    </IconButton>
)

const CreateIcon = ({
    onClickAction
    }) => (
    <IconButton onClick={onClickAction} touch>
        <ContentAdd />
    </IconButton>
)

const ClientIcons = ({
    menuActions
    }) => (
    <div>
        <IconButton onClick={menuActions.reverseFavouriteMenu}>
            <ActionFavorite/>
        </IconButton>
        <IconButton onClick={menuActions.reverseCartMenu}>
            <ActionShoppingCart/>
        </IconButton>
    </div>
)

const RightIcons = ({
    isAdmin,
    menuActions
    }) => ( isAdmin ?
        <CreateIcon onClickAction={menuActions.reverseCreateMenu}/>
        :
        <ClientIcons menuActions={menuActions}/>
)

const Header = ({
    isAdmin = false,
    menuActions
    }) => (
    <Toolbar style={style.bar}>
        <ToolbarGroup float="left" firstChild>
            <MenuIcon onClickAction={menuActions.reverseLeftMenu}/>
        </ToolbarGroup>
        <ToolbarTitle text="TUDELARTE"/>
        <ToolbarGroup float="right" lastChild>
            <RightIcons menuActions={menuActions} isAdmin={isAdmin}/>
        </ToolbarGroup>
    </Toolbar>
)

Header.propTypes = {
    isAdmin: React.PropTypes.bool,
    menuActions: React.PropTypes.object,
}

function mapStateToProps(state, ownProps) {
    // You should not return the full state, but only the parts of it you need
    return state;
}

function mapDispatchToProps(dispatch) {
    return {
        menuActions: bindActionCreators(MenuActionCreators, dispatch),
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);

将调度注入将调用操作的组件时，最有效的方法是什么？

What's the most efficient approach to follow when inject dispatch into components which will call the actions?

redux

react-redux