如何在不使用 connect() 的情况下连接或订阅 Redux Store？

Question

在 React 应用程序中，我有一个常量文件，我在其中创建了一个 HTML 字符串的对象，在这些 HTML 字符串中，我必须从 [=11] 中存储的状态传递一些动态值=]，下面是我的常量文件的结构（它是一个示例结构，实际文件有大约 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 store 才能通过 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 状态，然后 return 最新的 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 函数应该 return 每次都是最新的字符串。

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？

How to connect or subscribe to Redux Store without using connect()?

reactjs

redux

react-redux

redux-store