Tough time fully understanding this Redux action

JavaScript
1

I wrote this code a couple months ago and to be honest I still don’t understand it, so I thought I’d ask. This is a Redux action which is inside an exported object.

my notes on what I think is going on are below

// invoke an anonymous function. The function is given the return value 
// of a dispatcher function.
  getDonationData : (reportType, recordCount) => (dispatch => {
// return a promise after posting to a route on the back end. Supply the
// route with keys/values for reportType and recordCount
    return Axios.post(`${process.env.REACT_APP_BACKEND_DOMAIN}/reports/`,
      {
      reportType, recordCount
    }
    )
// log and alert errors
// on success, run the dispatcher function. Give it an object with 2 k/v
// pairs. The dispatcher will put the action into the reducer function. 
      .then(apiResponse => {
        if (apiResponse.data.error) {
          console.log(apiResponse.data, `=====error=====`);
          window.alert(apiResponse.data.error)
        } else {
          const returnedArray = apiResponse.data;
          dispatch({
            type : 'rawReportData',
            payload : returnedArray
          })
        }
      })
  }),

I think I mostly have it after writing it out but there is some disclarity on where the dispatcher function comes from. I guess React-Redux?

2

The dispatch function comes from the mapDispatch function you pass to connect() (it can be named whatever you like, that’s just the traditional name). connect() does indeed come from react-redux.

The react-redux docs go into more detail on the mapState and mapDispatch functions, including how it passes dispatch in as an argument.

1 Like