Question

在react应用程序中，我有一个常量文件，我在其中创建了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()

获取更新的状态

但是正如您所看到的，该文件不是组件，而是为定义常量而创建的，那么，我如何订阅该文件以获得更新后的状态？

Answer 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)

Answer 2

如果要获取最新的字符串，请考虑创建一个函数，该函数将获取最新的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函数应该每次都返回最新的字符串。

Answer 3

这是我在阅读@ remix23的注释行之间得出的结论

在组件中，无论我要使用我的HTML_MESSAGES到哪里，我都将其连接到存储，然后用所需的存储状态替换已定义的占位符。例如：

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

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);

如何不使用connect（）连接或订阅Redux Store？

3 个答案: