MapDispatchToPros与事件

Question

我有我的这部分代码：

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中分配我的动作？

Answer 1

mapDispatchToProps的目的不是直接实际调度动作。

mapDispatchToProps用于将动作创建者与调度绑定，并将这些新的绑定函数作为道具传递给组件。

使用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) 
    } 
    } 

    // ... 

}