来自组件的 Redux 触发操作
Redux trigger action from the component
我喜欢学习 redux 并将其应用到我当前的项目中。我心里有一个问题。此刻动作是从道具传下来的。只是想知道我可以导入动作并调用动作吗?因为我可能有嵌套的嵌套组件保持向下传递道具可能不是理想的会很高兴在深层触发动作而不向下传递道具。
任何建议表示赞赏:)
import React, { PropTypes, Component } from 'react';
export default class ButtonGroup extends Component{
static PropTypes = {
actions: PropTypes.object.isRequired
};
render() {
return (
<button className="button" onClick={ e => { this.props.actions.popForm()}}>Create New</button>
);
}
}
为了执行您所描述的操作,您需要使用 react-redux 中的 connect
。
因此,在您的示例中:
import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
import * as actions from './actions';
export class ButtonGroup extends Component{
static PropTypes = {
popForm: PropTypes.function.isRequired
};
render() {
return (
<button className="button" onClick={ e => { this.props.popForm()}}>Create New</button>
);
}
}
export default connect(null, actions)(ButtonGroup);
我喜欢学习 redux 并将其应用到我当前的项目中。我心里有一个问题。此刻动作是从道具传下来的。只是想知道我可以导入动作并调用动作吗?因为我可能有嵌套的嵌套组件保持向下传递道具可能不是理想的会很高兴在深层触发动作而不向下传递道具。
任何建议表示赞赏:)
import React, { PropTypes, Component } from 'react';
export default class ButtonGroup extends Component{
static PropTypes = {
actions: PropTypes.object.isRequired
};
render() {
return (
<button className="button" onClick={ e => { this.props.actions.popForm()}}>Create New</button>
);
}
}
为了执行您所描述的操作,您需要使用 react-redux 中的 connect
。
因此,在您的示例中:
import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
import * as actions from './actions';
export class ButtonGroup extends Component{
static PropTypes = {
popForm: PropTypes.function.isRequired
};
render() {
return (
<button className="button" onClick={ e => { this.props.popForm()}}>Create New</button>
);
}
}
export default connect(null, actions)(ButtonGroup);