Question

我是React的新手，我能够让react-router，react-redux和Immutable一起工作。在我的一个组件文件中，我的React组件中有一个handleItemClick()方法，它按预期工作：

mortgage.js

import import React from "react";
import { connect } from 'react-redux';
import { changeActiveMenu } from '../actions/action';

class Mortgage extends React.Component {
    constructor(props) {
        super(props);
        this.handleItemClick = this.handleItemClick.bind(this);
    }
    handleItemClick (e, { name }) { //name reflects the routeName
        const activeItemProp = this.props.app.get('primaryMenuActiveItem');
        this.props.changeActiveMenu("test1", "test2");
    }

    render() {
        console.log("Route Name=[" +this.props.route.name +"]");
        console.log(this.props.app);
        const activeItemProp = this.props.app.get('primaryMenuActiveItem');
        return (
          <div>
            <h4>{activeItemProp}</h4>
            <button onClick={this.handleItemClick}>Send Action</button>
          </div>
        )
    }
}

export default connect(
    state => ({ app: state.get('app'),routing: state.get('routing') }),
    { changeActiveMenu }
)(Mortgage)

我的行动非常简单：

action.js

export function changeActiveMenu(activeItem) {
  return {
    type: 'CHANGE_MENU',
    payload: {
      activeItem: activeItem
    }
  };
}

这是我的app reducer：

app_reducer.js

import Immutable from 'immutable';

const initialState = Immutable.Map({
  primaryMenuActiveItem: "overviewPrimary",
  secondaryMenuActiveItem: 'home'
});

export default (state = initialState, action) => {
      console.log("action.type=[" +action.type +"]");
    if (action.type === "CHANGE_MENU") { //use the change primaryMenuActiveItem and secondaryMenuActiveItem
    if(action.payload.activeItem.indexOf('Primary') >= 0) { //dealing with primaryMenu
      return state.merge({ //returning new state
        primaryMenuActiveItem: action.payload.activeItem
      })
    }
    else { //dealing with secondaryMenu
      return state.merge({ //returning new state
        secondaryMenuActiveItem: action.payload.activeItem
      })
    }
  }
  return state; //returns initial state
}

我从我的app reducer中的action.type获得了预期的"CHANGE_MENU"值console.log()：

action.type=[CHANGE_MENU]

我的问题是当我尝试在我的React类中实现相同的代码时（main.js中的第6行）。我利用上面的相同动作和app reducer文件。在我的React类中，它是我的主要组件的一部分：

main.js

import React from "react";
import { connect } from 'react-redux';
import { changeActiveMenu } from '../../actions/action';

const PrimaryMenu = React.createClass({
  handleItemClick (e, { name }) { //name reflects the routeName
     changeActiveMenu("primary", name);
   },
  renderMenu(menu) {

    //use primaryMenuActiveItem and secondaryMenuActiveItem
    const routingProp = this.props.routing.get('locationBeforeTransitions').get('pathname');
    console.log(routingProp);
    const primaryMenuActiveItem = routingProp === "/" ? 'overviewPrimary' : routingProp;
    console.log(primaryMenuActiveItem);

    return (
      <div id="primary-menu">
        <Menu pointing>
          <Link to={menu[0].routeName}><Menu.Item name={menu[0].routeName} active={primaryMenuActiveItem === menu[0].routeName} onClick={this.handleItemClick}>{menu[0].menuName}</Menu.Item></Link>
        </Menu>
      </div>
    )
  },
  render() {
    const menu = this.props.data;
    return (
      <div id="menu">
        {this.renderMenu(menu)}
      </div>
    )
  }
});

class Main extends React.Component {  
  render() {
    const {routing} = this.props;
    return (
      <div id="main">
        <PrimaryMenu app = {this.props.app } routing = {this.props.routing } data={primaryMenuList}/>
        {this.props.children}
      </div>
    )
  }
}

export default connect(
  state => ({ app: state.get('app'),routing: state.get('routing') }),
  { changeActiveMenu }
)(Main)

现在我的action.type如下：

action.type=[@@router/LOCATION_CHANGE]

我知道这与React class vs. component有关。有任何想法吗？感谢所有帮助。

Answer 1

您看到@@router/LOCATION_CHANGE的日志可能是react-router分派的操作。

但我发现你的第二次实施存在问题。

在第一个示例（extends React.component）中，您@connect已将导入的操作changeActiveMenu添加到Mortgage。因此，在handleItemClick内，你将行动作为this.props.changeActiveMenu("test1", "test2")发送。

在第二个例子中（使用React.createClass），我发现你有两个组件。 Main和PrimaryMenu。您向Main @connect编辑changeActiveMenu，因此Main将其作为道具接收。然后在PrimaryMenu的handleItemClick内，您调用将动作创建者设为changeActiveMenu("primary", name)。

您可能已经注意到上面两段中的粗体字。调用动作创建者和派遣动作创建者之间存在差异。

需要思考的要点：

在Redux中，动作创建者是return具有type键的对象的函数。 type是目标缩减器。
要触发目标缩减器，操作创建者在调用时应使用dispatch包装。

所以在你的第二个例子中，你只是调用它，而没有用dispatch包装它。当你在mapDispatchToProps内@connect（我看到你使用了一个很好的简写）时，动作创建者基本上用dispatch包裹并作为道具传递给成分

所以你可以做的是：

export default connect(
  state => ({ app: state.get('app'), routing: state.get('routing') }),
  { changeActiveMenu }
)(PrimaryMenu)

将状态键app和routing连接到主组件没有意义，因为除了将其传递给PrimaryMenu之外，Main不会使用这些道具。因此，让@connect在PrimaryMenu上的所有内容。

然后是PrimaryMenu的handleItemClick：

  handleItemClick (e, { name }) {
     this.props.changeActiveMenu("primary", name);
  }

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

1 个答案: