ReduxのmapDispatchToPropsは、適切なペイロードを得ていない

Question

だから、私のアプリでは、この単純化された構造があります：コンポーネントで

は私が持っている：私の容器に

handlePageClick(data) { 
     this.props.onChangePage(data.selected + 1); 
     this.props.onSearchSomething(this.props.PM); 
    } 

：

const mapDispatchToProps = dispatch => ({ 
    onUpdateForm: (propPath, val) => { 
     dispatch(updatePMForm(propPath, val)); 
    }, 
    onSearchSomething: (payload) => { 
     // TODO: process the PM state here when integrating with the server in order to extract 
     // the proper payload out of the state object 
     dispatch(searchSomething(15, payload)); 
    }, 
    onChangePage: (pageNumber) => { 
     dispatch(changePage(pageNumber)); 
    }, 
}); 

は、だから私はトリガーpageClick、onChangePageは、mapDispatchToProps dispatch（searchSomething（15、payload））のnewStateを返します。まだ更新されていないペイロード内の以前のStateを受け取ります。

Answer 1

あなたは現在のものとcomponentDidUpdateまたはcomponentWillUpdateと差分以前の状態を使用して、ストアから更新された値でthis.props.onSearchSomethingを呼び出すのではなくhandlePageClickに次々とそれを呼び出す必要があります。何故ですか？コンポーネント内の状態の変化は非同期であり、ほぼすべての場合、コンポーネントの小道具がthis.props.onChangePageとthis.props.onSearchSomethingの間で更新されることはありません。私が話していることをよりよく理解するためにthis issueを読んでください。

しかし少し前にあなたを助けるために、私は小さなユーティリティmap-props-changes-to-callbacksを作成して、コンポーネントのコールバックをreduxストアの特定の変更に割り当てました。おそらく、それはあなたのケースで役に立つことができ、あなたはそのようなコードを書くことができます：あなただけのワンアクションを派遣し、見返りに、検索結果を得ることができるので、

handlePageClick(data) { 
    this.props.onChangePage(data.selected + 1) 
} 

onPageChanged() { 
    this.props.onSearchSomething(this.props.PM) 
} 

また、あなたは、単一のアクションにあなたのロジックを移動することを検討すべきです。