CODEWITHSUNDEEP
javascriptreactjsif-statementecmascript-6
Maria Andre
Maria Andre

Reputation: 23

Cleanest way to write if with multiple else with condition

I am writing a conditional if else. There's multiple else statements. What is the cleanest way to write it? And the best way to code it down.

PS I am new to reactJS.

if (type === activity.fetchPeople && loading) {
    await store.dispatch(fetchPeople(store, 20, 0, params.sectionType));
    store.dispatch(showGlobalLoader(false));
  } else if (type === activity.pathfallRevert) {
    await store.dispatch(fetchactivityfallRevert(store, params.userId, 20, 0));
    activityPro = `${labels.pathfallRevert} (${params.count})`;
    store.dispatch(showGlobalLoader(false));
  } else if (type === activity.pathfall) {
    await store.dispatch(fetchactivityfall(store, params.userId, 20, 0));
    activityPro = `${labels.pathfall} (${params.count})`;
    store.dispatch(showGlobalLoader(false));
  } else if (type === activity.road) {
    await store.dispatch(fetchRoads(store, params.userId, 20, 0));
    activityPro = `${labels.road} (${params.count})`;
    store.dispatch(showGlobalLoader(false));
  } else if (type === activity.movers) {
    await store.dispatch(fetchmovers(store, params.userId, 20, 0));
    activityPro = `${labels.movers} (${params.count})`;
    store.dispatch(showGlobalLoader(false));
  } else {
    store.dispatch(showGlobalLoader(false));
  }

Thanks

Upvotes: 0

Views: 685

Answers (2)

nish
nish

Reputation: 329

you may use Switch\Case

switch(type) {
  case activity.fetchPeople:
    // code block
    break;
  case activity.pathfallRevert:
    // code block
    break;
  default:
    store.dispatch(showGlobalLoader(false));
    // code block
  }

Upvotes: 1

Nicholas Law
Nicholas Law

Reputation: 1

We get really used to the if/else syntax, especially if we are coming from other object oriented languages. For me it was Java, and this pattern was hard to deviate from when learning the fundamentals of Javascript. As a general rule, if you see a lot of if/else if/else (especially if the conditional statement is similar in each one), then something can probably be done differently.

As someone else noted, the switch/case syntax is intended for exactly this use case. It is clean and readable, and it makes it easy to understand and add to later.

Another (more advanced) option would be to use Javascript's Object literals. In this case, you have each different type resulting in a different action. You could have an Object that looks something like:

var activities = {
  'activity.fetchPeople': function() {
    if (loading) {
      await store.dispatch(fetchPeople(store, 20, 0, params.sectionType))
      store.dispatch(showGlobalLoader(false))
    }
  },
  'activity.pathfallRevert': function() {
    await store.dispatch(...);
    activityPro = `${labels.pathfallRevert} (${params.count})`;
    store.dispatch(showGlobalLoader(false));
  }
}

After building this out for all of your activity types, you can call activities[type]()

Upvotes: 0

Related Questions