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

在父组件（标题）中连接

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);

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

1 个答案: