时间戳

首页 > 解决方案 > 如何使用 redux 制作切换器来翻译网站

javascript - 如何使用 redux 制作切换器来翻译网站

问题描述

过去两天我一直在从事一项任务，当用户选择切换按钮时，该任务增加了将整个网站从英语翻译成西班牙语的功能，但是，我真的是 Redux 的新手（在完全不同的项目）。给我代码的人已经配置了减速器，我只需要读取每个组件的状态。

我尝试在其中一个组件上使用此代码：

    const store = createStore(reducer);
    store.dispatch({
      type: 'TOGGLE-LANG'
    });
    store.subscribe(() => console.log(store.getState()));

但是，它仍然缺少一些东西，在这一点上，我完全迷失了，我很想得到一些指导以知道该怎么做。

我创建了一个包含此任务中涉及的所有代码的 Gist，它评论了预期的行为

[要点链接]：https ://gist.github.com/ManudeQuevedo/12cd63cf7431b5ec9b982a37391b7c56

目前，没有错误，它正在识别减速器（Lang），但我很想知道如何使它在需要翻译的其他组件中可操作。提前致谢！

标签： javascriptreactjsredux

解决方案

最后，这就是我所做的：

lang.js（减速器）

import { fromJS } from 'immutable';

const initState = fromJS({
  value: 'en',
  translations: {
    en: {
      component: {
        title: 'Mobile Connectivity',
        subtitle: 'Smart Messaging'
      }
    },
    es: {
      component: {
        title: 'Conectividad Móvil',
        subtitle: 'Mensajería Inteligente'
      }
    },
  }
});

export default (state = initState, action) => {
  switch (action.type) {
    case "CHANGE_LANGUAGE":
      return {
        ...state,
        value: action.payload
      };
    default:
      return state;
  }
};

我通过在这个组件上解构它来实现它，如下所示：

[Gist][1]

我将它添加到一个要点中，因为它是一个很长的代码，所以它会更具可读性。

推荐阅读