PROSAGA码农传奇-react-react-redux意外操作类型传递给React类的React操作（与React组件一起使用）

<div class =“post-text”itemprop =“text”>
  
    你看到的日志
     <code>
 @@router/LOCATION_CHANGE
 </code>
     可能是react-router调度的一个动作。
  
  
    但是我发现你的第二个实现存在问题。
  
  
    在第一个例子中（其中
     <code>
 extends React.component
 </code>
    你已经
     <code>
 @connect
 </code>
    ed导入的动作
     <code>
 changeActiveMenu
 </code>
     至
     <code>
 Mortgage
 </code>
    。在里面
     <code>
 handleItemClick
 </code>
     你是
    的
      派遣行动
    </强>
     如
     <code>
 this.props.changeActiveMenu("test1", "test2")
 </code>
    。
  
  
    在第二个例子中（使用
     <code>
 React.createClass
 </code>
    ），我看到你有两个组成部分。 Main和PrimaryMenu。你有
     <code>
 @connect
 </code>
    ED
     <code>
 changeActiveMenu
 </code>
     到Main，因此Main接收它作为道具。然后在PrimaryMenu里面
     <code>
 handleItemClick
 </code>
     你是
    的
      调用
    </强>
     动作创作者为
     <code>
 changeActiveMenu("primary", name)
 </code>
    。
  
  
    您可能已经注意到上面两段中的粗体字。调用动作创建者和派遣动作创建者之间存在差异。
  
  
    的
      要思考的要点：
    </强>
  
  <UL>
    <LI>
      在Redux中，动作创建者是其中的功能
       <code>
 return
 </code>
       一个带有的对象
       <code>
 type
 </code>
       键。该
       <code>
 type
 </code>
       是目标减速剂。
    </LI>
    <LI>
      要触发目标reducer，动作创建者应该用a包裹
       <code>
 dispatch
 </code>
       什么时候调用它。
    </LI>
  </UL>
  
    所以在你的第二个例子中，你只是调用它，而不是用它包装它
     <code>
 dispatch
 </code>
    。当你
     <code>
 mapDispatchToProps
 </code>
     （我看到你已经使用了一个很好的短手）里面
     <code>
 @connect
 </code>
    ，动作创作者基本上用一个包裹着
     <code>
 dispatch
 </code>
     并作为道具传递给组件。
  
  
    所以你能做的是：
  
   <pre>
 <code>
 export default connect(
 state => ({ app: state.get('app'), routing: state.get('routing') }),
 { changeActiveMenu }
)(PrimaryMenu)

</code>
 </pre>
  
    连接状态键没有意义
     <code>
 app
 </code>
     和
     <code>
 routing
 </code>
     主要组件为Main不会使用那些道具而不是传递给PrimaryMenu。那么我们
     <code>
 @connect
 </code>
     PrimaryMenu上的一切。
  
  
    然后是PrimaryMenu的
     <code>
 handleItemClick
 </code>
    ：
  
   <pre>
 <code>
 handleItemClick (e, { name }) {
 this.props.changeActiveMenu("primary", name);
 }

</code>
 </pre>
</DIV>