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

    // ... 

}