Access State inside of mapDispatchToProps method

I have written a container component using redux and my implementation for mapDispatchToProps looks like this

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

The problem is that in order to getTableData I need the state of some other components. How can I get access to the state object in this method?

You can use redux-thunk to create a separate action creator function which has access to getState, rather than defining the function inside 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))
        }
    }
}

Some varying ways to go about organizing those, but something like that ought to work.

Possible approach is also to use mergeProps that merges mapState and mapDispatch and allows to use both at the same time.

// Define mapState
const mapState = (state) => ({
  needeedValue: state.neededValue
})

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

// Merge it all (create final props to be passed)
const mergeProps = (stateProps, dispatchProps, ownProps) => {
  return {
    ...stateProps,  // optional
    ...dispatchProps,  // optional
    onChangeWithNeededValue: (newValue) => (
      dispatchProps.onChange(
        newValue,
        stateProps.needeedValue  // <<< here the magic happens
      )
    )
  }
}

// Pass mergePros to connect
const MyContainer = connect(mapState, mapDispatch, mergeProps)(MyComponent);

Official documentation: react-redux#connect

Possible performance drawback on larger apps: Stack Overflow - Performances and mergeProps in Redux

You can just use redux-thunk to get state. Write a helper function like this:

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

You can use this in a async function or generator function:

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

Access State inside of mapDispatchToProps method

Related

Recent Posts