Question

我正在使用React和Redux。

我有一个横幅组件，其中横幅显示在旋转木马中。

我有BannerContainer.js连接到redux和Banner.js这是组件。

点击旋转木马，我需要做两件事

将用户重定向到另一个网址＆＃39;
发起GTM活动

以上操作都不会修改状态。我应该从我的容器中通过mapDispatchToProps传递一个onClick处理程序吗？

正确的方法应该是什么？

Answer 1

如果您不需要发送任何操作，我认为您不需要在mapDispatchToProps中传递该功能。 BannerContainer中的本地函数应该足以满足您的要求。顺便说一下，什么是GTM活动？我不知道abbr。

Answer 2

我仍然会在连接中传递它，因为不应该隐藏在组件树中的业务逻辑。否则，如果您需要更改GTM内容或更改路线，则必须找到该组件。

创建一个thunk动作创建器，用于执行副作用并使用mapDispatchToProps对其进行映射。如果您的组件不是顶级Route组件，则可以使用withRouter来访问路由上下文。您甚至可以在容器中将装饰器或增强器组合成自己的：

import { connect, compose } from 'redux'
import { withRouter } from 'react-router'
import YourComponent from '../components/YourComponent'

// your dispatch
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onBannerClick(e){
       //do your GTM stuff
       //redirect the user!
       ownProps.history.push('/gohere')
    }
  }
}

// combine your enhancers, order is significant if you want
// to have withRouter() props in your connect methods
const enhance = compose(
   withRouter(),
   connect(mapStateToProps, mapDispatchToProps),
)

export default enhance(YourComponent)

从Container传递点击处理程序的正确方法，它不会修改状态？

2 个答案: