Locale language reducer I am learning redux by doing a small project. Everything is working fine, but I need to know how I can refactor such code. For this situation, it might be good to use if conditions like I have done, but what if I need to handle 7-8 languages? It won't be viable to use else if for 7 times. What is the proper way to handle such situation?

import { FRENCH } from '../../public/messages/fr';
import { ENGLISH } from '../../public/messages/en';

const initialState = {
  lang: FRENCH.lang,
  messages: FRENCH.messages
};
export const localeReducer = (state = initialState, action) =&gt; {
  switch (action.type) {
    case 'LOCALE_SELECTED':
    if (action.locale === 'fr') {
      return { ...initialState, lang: FRENCH.lang, messages: FRENCH.messages };
    } else if (action.locale === 'en') {
      return { ...initialState, lang: ENGLISH.lang, messages: ENGLISH.messages };
    } break;
    default:
      return state;
  }
};
I don't know redux at all, so I might have missed something important so that my suggestion may be naive and doesn't work.
If so, my apologies, and don't shoot me too hard :)

That said, here is how I'd work:


first add a registry for the currently added langs
then merely use the right one depending on action.locale if it exists in registry, or keep initialState if not


Actually it results in something like this:

import { FRENCH } from '../../public/messages/fr';
import { ENGLISH } from '../../public/messages/en';

const initialState = {
  lang: FRENCH.lang,
  messages: FRENCH.messages
};
const langs = {
  fr: FRENCH,
  en: ENGLISH
}

export const localeReducer = (state = initialState, action) =&gt; {
  switch (action.type) {
    case 'LOCALE_SELECTED':
      if (langs[action.locale]) {
        return {
          ...initialState,
          lang: langs[action.locale].lang,
          messages: langs[action.locale].messages
        };
      }
    default:
      return state;
  }
};