文章/答案/技术大牛

发布

问语言环境减缩器
EN

Code Review用户

提问于 2016-11-23 05:03:48

回答 1查看 83关注 0票数 2

我正在通过做一个小项目来学习redux。一切正常，但我需要知道如何重构这样的代码。在这种情况下，像我所做的那样使用if条件可能会更好，但是如果我需要处理7-8种语言呢？使用else if 7次是不可行的。处理这种情况的适当方法是什么？

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;
  }
};

javascript

ecmascript-6

react.js

i18n

回答 1

Code Review用户

发布于 2016-11-23 18:43:54

如果不希望在还原器文件中添加/删除语言，则必须找到一种方法将所有语言的语言限制为一个import。例如，可以在index.js下添加一个新的../../public/messages文件，如下所示：

// public/messages/index.js

import { FRENCH } from "./fr";
import { ENGLISH } from "./en";

export const defaultLocale = FRENCH;

export default {
  fr: FRENCH,
  en: ENGLISH
};

然后你可以更新你的减速机如下：

// reducer.js

import messages, { defaultLocale } from "../../public/messages";

const initialState = {
  lang: defaultLocale .lang,
  messages: defaultLocale .messages,
};

export const localeReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOCALE_SELECTED':
      const locale = messages[action.locale] || defaultLocale;
      return { ...initialState, lang: locale.lang, messages: locale.messages };
      break;

    default:
      return state;
  }
}

这样，在添加/移除区域设置时，您将不需要触摸还原器，因为它一开始就不知道哪些区域设置是可用的。通过在defaultLocale中导出一个新的public/messages/index.js常量，您还可以无缝地更改应用程序的默认区域设置，而无需让应用程序的其他部分知道这一变化。

请记住，在您的原始代码示例中，如果没有找到任何地区，您将返回一个undefined state，这可能会破坏您的应用程序。采用与我建议的类似的方式，您将始终返回默认的区域设置，因此您应该是安全的。

票数 1

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/147845

复制

相似问题

问语言环境减缩器
EN

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问语言环境减缩器EN

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问语言环境减缩器
EN