Javascript 在React和Redux中重新渲染所有组件

我有一个简单的应用程序：

import React，{Component}来自'React'；
从“/MainPage”导入主页面；
从“../localization”导入{setLanguage，currentLanguage，availableLanguages}；
从“redux”导入{bindActionCreators}；
从'react redux'导入{connect}；
将*作为appActions从“../actions/appActions”导入；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
$（'.dropdown button'）.dropdown（）；
}
setLanguageHandle（两个字母，e）{
e、 预防默认值（）；
语言（两个字母）；
}
render（）{
返回(

{availableLanguages（）.map（（项，i）=>

)}



© 2017
)
}
}
函数mapStateToProps（）{
返回{
}
}
功能图DispatchToprops（调度）{
返回{
appActions:bindActionCreators（appActions，dispatch）
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）

这里我有一个简单的本地化下拉列表，我点击语言，然后它触发

setLanguageHandle

setLanguage

from

。/localization

使用cookie设置语言

MainPage

组件及其子组件从Redux加载其所有属性。本地化是唯一的例外，看起来像

\u localize（'sometext'）

，它使用：

导出功能（按键）{
让currentCulture=getCurrentCultureFromCookie（）；
让translation=translations[currentCulture]['translations'][key]；
返回翻译；
}

因此，本地化中没有使用Redux

问题是，当我更改区域性时，子组件不会重新渲染。我试图调用我的合成Redux操作，它改变了存储中的一个独立变量，但没有重新渲染，似乎它太聪明了，不适合做这种工作

---

当我调用

setLanguageHandler

提供动态区域性切换时，如何重新呈现整个应用程序中的所有组件？也许还有另一种方法可以实现这些功能，不用重新加载整个页面？

我认为最好的方法是使用redux进行本地化。具体来说，我认为你应该把“当前文化”放进你的商店。然后将对“_localize”方法的调用替换为本地化组件，该组件可能如下所示：

import React from "react";
import { connect } from "react-redux";

function Localize(props) {
    return (
        <span>{translations[props.currentCulture]['translations'][props.textKey]}</span>
    );
}

const mapStateToProps = (state) => {
  return {currentCulture: state.currentCulture};
};
const LocalizeContainer = connect(mapStateToProps)(Localize);
export default LocalizeContainer;

然后使用它：

import React from "react";
import localize from "./localize.js"

function YourDisplayComponent(props) {
    return (
        <input value={props.localize(props.inputValueKey)}>
    );
}
export default localize(YourDisplayComponent);

从“React”导入React；
从“/localize.js”导入本地化
功能组件（道具）{
返回(
);
}
导出默认本地化（YourDisplayComponent）；

你试过了吗？@Nikolajdallarsen是的，它只更新应用程序组件，不会影响应用程序的子项。看起来不错，但如果我们想本地化类似

，我们应该怎么做？我在回答中添加了一种替代方法，解决了需要本地化属性值的用例。据我所知，对于第二种方法，我们只需要在

localize

函数中包装要使用本地化的组件？我们应该如何包装已经包装好的组件，例如。g<代码>导出默认连接（MapStateTops，mapDispatchToProps）（应用）？只需将其双重包装即可，例如，

导出默认本地化（连接（MapStateTops，mapDispatchToProps）（应用））否，它不起作用：
未捕获类型错误：（0，\u localization.localize）不是函数
。这是实现完美本地化唯一剩下的东西。
import { connect } from "react-redux";

const localizeText = currentCulture => textKey => { return translations[currentCulture]['translations'][textKey]; };

const mapStateToProps = (state) => {
  return { localize: localizeText(state.currentCulture) };
};

export default function localize(LocalizedComponent) {
  return connect(mapStateToProps)(LocalizedComponent);
}

import React from "react";
import localize from "./localize.js"

function YourDisplayComponent(props) {
    return (
        <input value={props.localize(props.inputValueKey)}>
    );
}
export default localize(YourDisplayComponent);