React Redux action (function within function)

Question

I'm fairly new to react-redux and I'm struggling a lot with this problem. I have these functions in my action creator.

function register(user) {    
    function request(user) { return { type: userConstants.REGISTER_REQUEST, user } }
    function success(user) { return { type: userConstants.REGISTER_SUCCESS, user } }
    function failure(error) { return { type: userConstants.REGISTER_FAILURE, error } }
}

This is how I'm trying to dispatch it.

const mapDispatchToProps = dispatch => {
    return {
        sendRegistration: (user) => {
            dispatch(userActions.register(user).request(user))
        }
    }
}

When the user clicks the submit button, the dispatch occurs like:

this.props.sendRegistration(this.state.user)

But I get the following error.

Uncaught TypeError: Cannot read property 'request' of undefined

Answer 1

You should have returned them in your register function, like this

function register(user) {    
    function request(user) { return { type: userConstants.REGISTER_REQUEST, user } }
    function success(user) { return { type: userConstants.REGISTER_SUCCESS, user } }
    function failure(error) { return { type: userConstants.REGISTER_FAILURE, error } }
    return {
      request : request,
      success : success,
      failure : failure
    }
}

However usually you dont need to wrap them inside a function. You can just export and import them, like

function request(user) { return { type: userConstants.REGISTER_REQUEST, user } }
    function success(user) { return { type: userConstants.REGISTER_SUCCESS, user } }
    function failure(error) { return { type: userConstants.REGISTER_FAILURE, error } }

export {request, success, failure}