React call export function in same file

Question

I'm new to React!

I have a function...

export const getBookingData = () => dispatch => {
  console.log('ran getBookingData');
  return new Promise(async (resolve, reject) => {

  })
}

Which I then call in another file by doing (which works fine):

import { getBookingData } from "../actions";
getBookingData(); // logs 'ran getBookingData'

However, I would like to try and call getBookingData from within the same file that it is declared.

I have tried:

const getBookingData = () => dispatch => {
  console.log('ran getBookingData');
  return new Promise(async (resolve, reject) => {

  })
}

const moveVisitor = (visitorId, destination, source) => async (dispatch, getState) => {
  console.log('error with post api'); // logs ok
  getBookingData(); // doesn't log 'ran getBookingData'

  let state = getState();
  let { entities: { booking: { booking_id } } } = state;
  let removeBed = {};
  removeBed.booking_visitor_name_id = visitorId;
  removeBed.room_id = destination;
  removeBed.booking_id = booking_id;

  api.post('/accommodation/room/move-participant', removeBed).then(function (response) {
    // ok
  }).catch(function (error) {

  });
}
export { getBookingData, moveVisitor }

getBookingData(); // doesn't work — What does "doesn't work" mean? Is there an error? Some behaviour you don't expect? Provide a clear problem statement. — Quentin
– Quentin, Commented Feb 13, 2020 at 11:39
Just a quick reminder that this getBookingData accepts no parameter, which is then returning another function which is accepting dispatch as its parameter. You can say that function is curried, so you may need to call it like so: getBookingData()(yourDispatchObject). What you have now by calling getBookingData() alone is only returning an anonymous function which of course doesn't do anything if not being called — ionizer
– ionizer, Commented Feb 13, 2020 at 11:53
@ionizer I think I only partially understand! If that were the case, then why is it that it works when called in another file ? — Jonathan Clark
– Jonathan Clark, Commented Feb 13, 2020 at 11:57
This seems to be some react-redux stuff which I'm not all too familiar with. But maybe you had mapped your function with mapDispatchToProps()? — ionizer
– ionizer, Commented Feb 13, 2020 at 12:00
Actually, try using getBookingData()(dispatch) on where you commented // doesn't log 'ran getBookingData'. I think this should work — ionizer
– ionizer, Commented Feb 13, 2020 at 12:02

ionizer · Accepted Answer · 2020-02-13 12:09:10Z

2

You can say that the getBookingData function is curried, as it is a function (accepting no parameter) returning another function (accepting dispatch object as parameter). What you have by just calling getBookingData() is an anonymous function which accepts the dispatch object as the parameter, so you need to call it once more.

Replacing your non-working call of getBookingData() with getBookingData()(dispatch) should work.

answered Feb 13, 2020 at 12:09

ionizer

1,73112 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akshay · Accepted Answer · 2020-02-13 11:39:38Z

2

Have you tried exporting as below

const getBookingData = () => dispatch => {
  return new Promise(async (resolve, reject) => {
    // some stuff here
  })
}

const moveVisitor = (visitorId, destination, source) => async (dispatch, getState) => {
  getBookingData(); // doesn't work
}

export { getBookingData, moveVisitor }

answered Feb 13, 2020 at 11:39

Akshay

14.4k5 gold badges49 silver badges73 bronze badges

6 Comments

Jonathan Clark Over a year ago

Although this still works in the other file it still doesn't seem to fun when invoked in the moveVisitor function

Akshay Over a year ago

@JonathanClark It should work this way, did you double-check to see if you're using it correctly in the same file? You may have missed an argument or something like that ?

Jonathan Clark Over a year ago

Have updated as maybe the problem wasn't where I thought

Akshay Over a year ago

@JonathanClark So error with post api is logged, but ran getBookingData is not ?

Akshay Over a year ago

Try console log before the promise statement, see if it works @JonathanClark

|

Collectives™ on Stack Overflow

React call export function in same file

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related