在开发 React/Redux 应用时，日期时间格式的处理是一个常见的问题。如果不加以处理，可能会导致各种奇怪的问题，例如时区不一致、跨时区转换错误等等。本文介绍了一种优雅的方法来处理日期时间格式，在 Redux 应用中可行且方便使用。
问题描述
在 Redux 应用中，处理日期时间通常包含以下几个问题：
- 存储日期时间的数据结构。
- 将日期时间从服务器获取数据并显示在应用程序中。
- 在应用程序中输入日期时间值。
- 在 Redux 应用中对日期时间进行操作。
存储日期时间的数据结构
Redux 存储数据的结构是一个普通的 JavaScript 对象。我们需要选择一个合适的数据结构来表示日期时间信息。有两种通用的数据结构可供选择：
JavaScript Date
JavaScript 中的 Date 对象非常方便，但存在很多问题，例如它是可以修改的，而我们在 Redux 中要求数据是不可变的。而且，它不包括时区信息，因此在使用时要谨慎。
ISO 8601 字符串
ISO 8601 是日期时间格式的国际标准。使用 ISO 8601 字符串作为存储和交换日期和时间信息的方式是一种非常不错的方法。它的格式是 YYYY-MM-DDTHH:mm:ss.sssZ，其中 T 表示日期和时间的分界线，Z 表示 UTC 时间。这个格式包括了时区信息，因此非常便于处理。
将日期时间从服务器获取数据并显示在应用程序中
将日期时间从服务器获取到应用程序中时，我们需要进行一些转换。首先，我们需要将日期时间值从字符串转换为 JavaScript 对象。然后，如果需要，我们可以使用 JavaScript 对象的 toLocaleString() 方法将其格式化为用户习惯的格式。
在应用程序中输入日期时间值
在应用程序中输入日期时间值时，我们可以使用浏览器支持的日期时间选择器。但是，它并不好看，而且不太方便。为此，我们可以使用第三方日期时间选择器，例如 react-datetime。
在 Redux 应用中对日期时间进行操作
在 Redux 应用中对日期时间进行操作时，我们需要编写一些 Redux 的 action 和 reducer。例如，我们可能需要编写以下 action：
{
type: 'SET_START_TIME',
payload: new Date(),
}然后，我们可以将日期时间格式化为字符串，并将其保存到 Redux 的 store 中。需要注意的是，在保存到 Redux 的 store 中时，我们应该使用 ISO 8601 字符串格式。
优雅的解决方案
为了更好地处理日期时间，我们可以使用 Moment.js 这个非常流行的日期时间处理库。它是一个轻量级的 JavaScript 库，用于解析、验证、操作和格式化日期和时间。它支持大量的本地化，并有很多有用的 API。
要在 Redux 应用中使用 Moment.js，我们可以编写一个简单的 Redux 中间件，该中间件可以帮助我们格式化和解析日期时间值。
具体来说，在 Redux 中间件中，我们可以使用 Moment 来将日期时间格式从字符串转换为标准的 JavaScript 日期时间对象。然后，我们可以再将其格式化为 ISO 8601 字符串格式，并将其保存到 Redux 的 store 中。在从 Redux 的 store 中获取日期时间值时，我们可以将其解析为 Moment 对象，并将其格式化为迎合用户习惯的格式。
下面是一个示例代码，介绍了如何编写一个 Redux 中间件来处理日期时间格式：
-- -------------------- ---- -------
------ ------ ---- ---------
----- ------------- - ---------------------------
------ ------- ----- -- ---- -- ------ -- -
----- - ------- - - -------
-- -------- -- ------ ------- --- --------- -
-------------------------------- -- -
----- ----- - -------------
-- ------- ----- --- -------- -- ------------- -------------- ---------------- -
------------ - ----------------------------------------
-
---
-
----- ------ - -------------
-- ------- -- ------ ------ --- --------- -
------------------------------- -- -
----- ----- - ------------
-- ------- ----- --- -------- -- ------------- -------------- ---------------- -
----------- - -----------------------------------
-
---
-
------ -------
--在本例中，我们采用了这样的方式，如果 action 的 payload 中包含字符串形式的日期时间信息，则将其转换为 Moment 对象，并将其重新格式化为 ISO 8601 字符串格式。在将其存储到 Redux 的 store 中时，所有数据都是用 UTC 格式存储的，以确保时区信息正确。在获取数据时，我们将 ISO 8601 字符串解析为 Moment 对象，再将其格式化为本地时区格式并返回。
结论
在 Redux 应用中，使用 Moment.js 可以使日期时间操作更为方便和统一。通过自定义 Redux 中间件的方式，可以避免将日期转换错误，同时也可以将 Redux store 中的数据格式化为更易于维护和使用的形式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f602e5c5c563ced57e99a6