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

Question

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

这里有一个例子：

1. 注入子组件

   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

2. 在父组件中连接（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

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

我也不会注入完整的调度，但可能只注入已经绑定的操作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);