如何结合 Redux 实现国际化？
随着互联网的发展，网站和应用程序的用户群体越来越全球化。因此，为了适应不同国家和地区的用户，国际化已经成为了一个必备的功能。Redux 是一个流行的 JavaScript 库，它可以用于管理 Web 应用程序中的状态，包括国际化状态。 在本文中，我们将介绍如何使用 Redux 实现国际化。
- 在 Redux Store 中添加语言状态
Redux 是一个状态管理库，因此首先需要在 Redux Store 中添加一个表示当前语言的状态。例如，我们可以创建一个名为 language 的状态，并将其初始化为默认语言，如下所示：
const initialState = {
language: 'en'
};
function reducer(state = initialState, action) {
// ...
}- 添加语言切换 Action
接下来，我们需要添加一个表示用户选择不同语言的 Action。我们可以创建一个名为 CHANGE_LANGUAGE 的常量，并用它创建一个 Action Creator，如下所示：
export const CHANGE_LANGUAGE = 'CHANGE_LANGUAGE';
export function changeLanguage(language) {
return { type: CHANGE_LANGUAGE, language };
}- 在组件中订阅语言状态
现在，我们已经在 Redux Store 中创建了语言状态和语言切换 Action，我们需要在组件中订阅这些状态。例如，我们可以创建一个名为 LanguagePicker 的组件，订阅语言状态并显示一个下拉菜单，让用户选择不同的语言，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - -------------- - ---- ------------
-------- ---------------- -
----- -------- - --------------
----- -------- - ----------------- -- ----------------
-------- --------------------------- -
---------------------------------------------
-
------ -
------- ---------------- --------------------------------
------- ---------------------------
------- ----------------------------
------- ---------------------------
---------
--
-
------ ------- ---------------- 在组件中访问翻译
最后，我们需要在组件中使用翻译。Redux Store 中的语言状态将决定哪种翻译版本应该用于组件。例如，我们可以创建一个名为 Greeting 的组件，在组件中获取翻译版本，并显示用于给用户打招呼的文本，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------------
-------- ---------- -
----- -------- - ----------------- -- ----------------
----- ------------ - -
--- ---------
--- -----------
--- --------
--
------ ----------------------------------
-
------ ------- ---------通过这种方式，我们成功地将 Redux 与国际化相结合，使我们的 Web 应用程序变得更加全球化。希望本文能为你提供深度和指导意义。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67806a59ce7f4861253ad69f