Question

我有一个reducer，它跟踪我的应用程序状态中的某种日期。默认情况下，它是通过moment.js库获取的当前日期。

const selectedDateReducer = (state = moment(), action) => {
  switch (action.type) {
    case 'SET_DATE':
        return action.date;
    default:
        return state;
  }
}

效果很好，但现在我希望所有日期都在特定的语言环境中：

const selectedDateReducer = (state = moment().locale(globalLocale), action) => {
  switch (action.type) {
    case 'SET_DATE':
        return action.date;
    default:
        return state;
  }
}

我的React组件中也需要相同的语言环境，所以我将它传递给：

<Component locale={globalLocale}></Component>

并且不想对其进行硬编码。

全局变量也不能很好地工作，因为在测试期间很难重新定义它们。

如果它不是状态启动的一部分，我可以将其作为某个操作的一部分传递，但我的reducer初始化代码中需要globalLocale。

也许，在这种特殊情况下，我可以将语言环境逻辑移动到其他地方，但我对某种一般模式感兴趣。

Answer 1

你只需要制作一个模块。

export const globalLocale = 'en';

然后您可以通过导入它从任何需要它的地方使用它。或者，您可以将其设为功能，以便随时更改。但是，这使它成为状态，因此它应该放在Redux中。唯一的例外是，如果你在初始化时设置一次，因为在应用程序的生命周期内它仍然是一个常量。

let currentLocale = 'en';
export const globalLocale = () => currentLocale;
export const setGlobalLocale = newLocale => currentLocale = newLocale;

现在，因为它是一个模块，它真的是全球性的。这意味着如果您使用服务器端React，那么渲染服务器的所有内容都将使用相同的区域设置。解决方案就是使用Redux。

作为旁注：时间是一个与人类标记它的方式分开的实体。它同时存在于我们所有人。 “现在”对于你我和地球上或其他地方的任何人和任何东西都是一样的。

这意味着在日期上设置区域设置不一定是个好主意。最好存储一个通用日期。

此外，状态通常只是一个普通的对象。 moment实例不一定属于Redux状态。

对我来说最有意义的是存储Date（可序列化JSON.stringify或Unix时间戳（(new Date ()).getTime()）以及当前区域设置，这将是app-global因为应用程序只有一个规范的Redux状态。

然后你在moment的帮助下创建一个辅助函数，它接受日期和区域设置并根据当前区域设置格式化日期，当然，在组件或{{{{{ 1}}。

Redux：减速器的全局配置

1 个答案: