Question

我正在使用组件翻译屏幕上的文字。

这是我的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中重新渲染页面。这可能吗？

Answer 1

从我所看到的，你直接从组件内部访问商店，它无法检测到状态的任何变化，因为它还没有订阅Redux商店，我建议你使用{{1 }}。（github，包含存储库和文档）

使用React Redux，您可以使用React Redux API来包装组件，将其订阅到Redux商店的任何更改，然后从商店中提取所需的状态并触发组件的呈现把那个州作为道具。使用connect函数（documentation）完成提取所需状态。

我建议阅读，理解和使用mapStateToProps，因为它有一个相对简单的API，而且非常强大和有用。

此外，在您的代码中，您可以在React Redux组件中使用connect，通过传递给MyClass的{{1}}提取所需的状态，并将该状态作为道具。这样你可能不需要mapStateToProps类，你将使用connect函数（它将具有T方法中包含的相同逻辑）来完成相同的任务。

Answer 2

@fobus，如果您在调用T时尝试使用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>) } }）来更新状态。

您可以测试类似以下代码的内容：

document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC;

如何在React上使用Redux重新渲染所有页面

2 个答案: