Как подключиться или подписаться на Redux Store без использования connect ()? - PullRequest
Новая
       49

Как подключиться или подписаться на Redux Store без использования connect ()?

0 голосов
/ 05 сентября 2018

В приложении реагирования у меня есть постоянный файл, в котором я создаю объект строк 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;

В приведенном выше фрагменте кода будет доступно только начальное состояние хранилища, но не обновленное состояние хранилища в будущем. В соответствии с документацией, мы должны подписать компонент на хранилище резервов, чтобы получать обновленные состояния через connect()

Но как вы можете видеть, что этот файл не является компонентом и создан для определения констант, как я могу подписаться на это, чтобы получить обновленное состояние?

Ответы [ 3 ]

0 голосов
/ 05 сентября 2018

Если вы хотите получить последние строки, подумайте о создании функции, которая будет извлекать самое последнее состояние избыточности и затем возвращать последние строки 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 должен каждый раз возвращать последние строки.

0 голосов
/ 05 сентября 2018

Это то, что я придумал после прочтения между строками комментария @ 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);
0 голосов
/ 05 сентября 2018

Даже если вы можете подключить компонент без использования 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)
...