Question

我正在通过做一个小项目来学习redux。一切都很好，但我需要知道如何重构这些代码。对于这种情况，像我一样使用if conditions可能会很好，但是如果我需要处理7-8种语言呢？使用else if for 7 times是不可行的。处理这种情况的正确方法是什么？这是在这里问这样的问题的合适地方吗？

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) => {
  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;
  }
};

Answer 1

如果需要，您可以嵌套案例陈述：

switch (action.type) {
    case 'LOCALE_SELECTED':
      switch (action.locale) {
        case 'fr':
          return { ...initialState, lang: FRENCH.lang, messages: FRENCH.messages };
        default:
          return { ...initialState, lang: ENGLISH.lang, messages: ENGLISH.messages };
      }
      break;

    default:
      return state;
}

或者为了便于阅读（特别是在有很多情况的情况下）将子案例陈述分解为单独的函数（这是向'组合减速器'转变，其中状态来自多个减速器，它们也可以在不同的级别中层次）。

switch (action.type) {
    case 'LOCALE_SELECTED':
     return localeReducer(action);
      break;

    default:
      return state; 
}

语言环境减速器

1 个答案: