0

在反应应用程序中，我有一个常量文件，在其中创建了一个 HTML 字符串对象，在这些 HTML 字符串中，我必须从存储的状态中传递一些动态值store，下面是我的常量文件的结构（它是一个示例结构，实际文件有大约 18-20 个 html 字符串对象）：

import store from '../store';
let storeState = store.getState();
let dynamic_Data_from_Store = storeState.initAppReducer.clientData;

const HTML_MESSAGES = {
    REQUEST_OPTIONS: "<div>"+dynamic_Data_from_Store+"</div",
    ENQUIRY_OPTIONS: "<div>"+dynamic_Data_from_Store+"</div",
    OTHER_VALUES: "<div>"+dynamic_Data_from_Store+"</div"
}

export default HTML_MESSAGES;

在上面的代码片段中，只有初始商店状态可用，但以后更新的商店状态不可用。根据文档，我们必须让组件订阅 redux 存储才能通过connect()

但是正如您所看到的，这个文件不是组件，它是为了定义常量而创建的，那么，我怎样才能订阅它来获得更新的状态呢？

4

3 回答 3

1

即使您可以在不使用的情况下连接组件connect也无济于事，因为商店只能在运行时访问，而不是在模块初始化时访问。

这取决于您打算如何使用它，但您可以将 HHTML_MESSAGE 设为函数而不是普通对象：

function HTML_MESSAGES(dynamic_Data_from_Store) => {
    REQUEST_OPTIONS: "<div>"+dynamic_Data_from_Store+"</div",
    ENQUIRY_OPTIONS: "<div>"+dynamic_Data_from_Store+"</div",
    OTHER_VALUES: "<div>"+dynamic_Data_from_Store+"</div"
}

export default HTML_MESSAGES;

从您导入 HTML_MESSAGE 的位置（希望在连接的组件中），您将能够将 dynamic_data 传递给 HTML_MESSAGE函数

HTML_MESSAGE(dynamic_Data_from_Store)
于 2018-09-05T08:49:18.200 回答
1

如果你想获取最新的字符串，那么考虑创建一个函数来获取最新的 redux 状态，然后返回最新的 HTML 字符串。

import store from '../store';

function getHtmlMsg() {
    let storeState = store.getState();
    let dynamic_Data_from_Store = storeState.initAppReducer.clientData;

    const HTML_MESSAGES = {
        REQUEST_OPTIONS: "<div>"+dynamic_Data_from_Store+"</div",
        ENQUIRY_OPTIONS: "<div>"+dynamic_Data_from_Store+"</div",
        OTHER_VALUES: "<div>"+dynamic_Data_from_Store+"</div"
    }

    return HTML_MESSAGES;
}

export default getHtmlMsg;

现在调用getHtmlMsg函数应该每次都返回最新的字符串。

于 2018-09-05T08:59:55.973 回答
0

这是我在阅读@remix23 的评论后得出的结论

在我的组件中，无论我要使用 my HTML_MESSAGES，我都会将它连接到 store，然后用我需要的 store 状态替换定义的占位符。例如：

我的组件消耗了我的常量文件：

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import CONSTANTS from '../../../utils/Constants';
import HTML_MESSAGES from "../../../config/html_inserts";

class InsertMessages extends Component {

    createDataMessage = (type) => {
        let msg = '';
        switch (type) {
            case CONSTANTS.REQUEST_OPTIONS:
                msg = HTML_MESSAGES.REQUEST_OPTIONS;
                break;
            case CONSTANTS.ENQUIRY_OPTIONS:
                msg = HTML_MESSAGES.ENQUIRY_OPTIONS.replace('<clientData>', this.props.cliendData);
                break;
            default:
                break;
        }
        return msg;
    }

    insertMessages = (type) => {
 let content = this.createDataMessage(type);

let insert = //gql insert query
return insert;
    }

    render() {
        return (
            <Fragment>
                {this.insertMessages(type)}
            </Fragment>
        )
    }
}

const mapStateToProps = state => {
    return {
        cliendData: state.initAppReducer.clientData
    };
  };

export default connect(mapStateToProps, null)(InsertMessages);
于 2018-09-05T09:21:37.740 回答