如何在React上使用Redux重新渲染所有页面
我正在使用一个组件来翻译屏幕上的文本。
这是我的T类
//Redux store located in app.js
import { store } from "app.js";
export default class T {
/**
* finds the variable in store and returns the translation if exists.
* @param {String} key
*/
static _(key) {
const state = store.getState();
const translations = state.get("global").get("translations");
if (translations[key]) {
return translations[key];
}
return `*${key}*`;
}
}我像这样使用这个类
import T from 'libraries/T';
import React from 'react';
export default MyClass extends React.Component {
render(){
return (<div>Here we write translation of name : {T._('name')}</div>)
}
}我的问题从这里开始，用户可以使用位于标题中的下拉列表来更改语言。当用户更改下拉列表时，我会更新存储中的语言日期。但是页面不会呈现新的值。当我转到另一个页面时，可以看到新的语言值。
但我想在saga或reducer中重新渲染页面。这个是可能的吗？
回答 2
Stack Overflow用户
发布于 2018-02-17 09:40:32
据我所见，你直接从组件内部访问存储，它不能检测到任何状态的变化，因为它没有订阅Redux存储，我建议你使用React Redux。(github，包含存储库和文档)
使用React Redux，您可以使用Redux来包装您的组件，为它订阅connect存储的任何更改，然后从存储中提取所需的状态，并触发组件的呈现，将该状态作为属性传递。提取所需状态是使用mapStateToProps函数(documentation)完成的。
我推荐阅读、理解和使用React Redux，因为它有一个相对简单的应用程序接口，但却非常强大和有用。
此外，在您的代码中，您可以在MyClass组件中使用connect，通过传递给connect的mapStateToProps提取所需的状态，并将该状态作为属性传递。这样您可能就不需要T类了，您可以使用mapStateToProps函数(它将具有包含在_(key)方法中的相同逻辑)来完成相同的任务。
Stack Overflow用户
发布于 2018-02-16 06:28:50
@fobus，如果你每次调用T时都尝试使用setState来更新状态，页面将自动呈现。
您可以使用函数(例如dropDownChange)，用于每当用户选择新语言时更新状态。
您是否可以测试类似以下代码的内容：
import T from 'libraries/T';
import React from 'react';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {translationDate: {}};
this.dropDownChange = this.dropDownChange.bind(this);
}
dropDownChange(name) {
const data = T._(name);
this.setState({translationDate: data});
}
render() {
return (<div>Here we write translation of name : {this.state.translationDate}</div>)
}
}https://stackoverflow.com/questions/48816253
复制相似问题
腾讯云开发者
