redux - mapDispatchToProps メソッド内のアクセス状態

Question

redux を使用してコンテナー コンポーネントを作成しました。私の実装はmapDispatchToProps次のようになります。

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onChange: (newValue) => {
            dispatch(updateAttributeSelection('genre', newValue));
            dispatch(getTableData(newValue, ownProps.currentYear));
        }
    }
}

問題は、getTableData を取得するために、他のコンポーネントの状態が必要なことです。このメソッドで状態オブジェクトにアクセスするにはどうすればよいですか?

Answer 1

getState内部で関数を定義するのではなく、redux-thunk を使用して、 にアクセスできる別のアクション作成関数を作成できますmapDispatchToProps。

function doTableActions(newValue, currentYear) {
    return (dispatch, getState) => {
        dispatch(updateAttributeSelection('genre', newValue));
        let state = getState();
        // do some logic based on state, and then:
        dispatch(getTableData(newValue, currentYear));
    }
}


let mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onChange : (newValue) => {
            dispatch(doTableActions(newValue, ownProps.currentYear))
        }
    }
}

それらを整理する方法はいくつかありますが、そのような方法でうまくいくはずです。

Answer 2

redux-thunk を使用して状態を取得できます。次のようなヘルパー関数を記述します。

const getState = (dispatch) => new Promise((resolve) => {
  dispatch((dispatch, getState) => {resolve(getState())})
})

これを非同期関数またはジェネレーター関数で使用できます。

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    async someFunction() {
      const state = await getState(dispatch)
      ...
    }
  }
}