Redux 带有事件的MapDispatchToPros
我有这部分代码:Redux 带有事件的MapDispatchToPros,redux,action,stateless,Redux,Action,Stateless,我有这部分代码: constructor(props) { super(props) this.state = { symbol: '', side: '', status: '' }; this.onInputChange = this.onInputChange.bind(this); this.onValueChangeSide = this.onValueChangeSide.
constructor(props) {
super(props)
this.state = {
symbol: '',
side: '',
status: ''
};
this.onInputChange = this.onInputChange.bind(this);
this.onValueChangeSide = this.onValueChangeSide.bind(this);
this.onValueChangeStatus = this.onValueChangeStatus.bind(this);
this.onFormSelect = this.onFormSelect.bind(this);
}
onInputChange(event) {
this.setState({ symbol: event.target.value });
}
onValueChangeSide(event) {
this.setState({ side: event.target.value});
}
onValueChangeStatus(event) {
this.setState({ status: event.target.value});
}
onFormSelect(event) {
this.props.requestAccountsFilter(this.state.symbol, this.state.side,
this.state.status);
}
requestAccountsFilter是一个操作。其代码为:
export function requestAccountsFilter(symbol, side, status) {
return {
type: ACCOUNT_FILTERS,
payload: {
symbol,
side,
status
}
};
}
这种方法很有效
此外,我想使我的组件无状态,所以我创建了一个容器。我的问题是,我不知道如何使用上述功能分派我的操作。
我这样写:
const MapDispatchToProps = dispatch => (
{
requestAccountsFilter: (symbol, side, status) => {
dispatch(requestAccountsFilter(symbol, side, status));
}
}
);
但它不起作用。
如何在MapDispatchToProps中分派我的操作???MapDispatchToProps的目的不是直接分派操作。 mapDispatchToProps用于将动作创建者与dispatch绑定,并将这些新绑定的函数作为道具传递给组件 使用mapDispatchToProps的主要好处是,通过从组件中抽象出存储区的分派方法,使代码更干净。因此,我们可以调用道具,这些道具是没有访问权限的函数
this.props.onTodoClick(id);
然而,如果我们不使用mapDispatchToProps,那么我们必须将分派单独传递给组件并分派操作,如下所示:
this.props.dispatch(toggleTodo(id));
您可以使用示例代码中所示的mapDispatchToProps,然后在其他地方编写:
mapDispatchToProps必须是纯功能,不能有副作用。
从函数内部调度操作将被视为副作用。当函数的评估在其自身之外改变状态(改变应用程序的全局状态)时,函数有一个或多个“副作用”
而是使用生命周期挂钩来调度操作,以响应组件上的道具更改:
class exampleComponent extends Component {
componentDidMount() {
this.props.fetchData(this.props.id)
}
componentDidUpdate(prevProps) {
if (prevProps.id !== this.props.id) {
this.props.fetchData(this.props.id)
}
}
// ...
}