Как я могу получить доступ к состоянию в моем магазине после звонка store.subscribe?

Question

У меня есть компонент textarea, состояние которого я храню в своем хранилище резервов. У меня есть 2-й компонент, который нуждается в доступе к этому состоянию каждый раз, когда оно меняется.

Есть ли способ получить доступ к состоянию текстовой области каждый раз, когда оно изменяется во 2-м компоненте, без необходимости использовать setState, как я реализовал в своем решении? Решение у меня работает, но кажется хакерским. Есть ли лучший способ получить доступ к состоянию textarea из моего магазина или это лучшее решение? Спасибо!

Вот мой код для 2-го компонента:

import React, { Component } from 'react';
import NavButton from '../../components/NavButton/NavButton';
import ParakeetHeader from '../../components/ParakeetHeader/ParakeetHeader';
import Greatmessage from '../../components/GreatMessage/GreatMessage';
import FeedbackBtns from '../FeedbackBtns/FeedbackBtns';
import Textarea from '../Textarea/Textarea';
import Otherbtn from '../OtherBtn/OtherBtn';

import { withRouter } from 'react-router'; 

import store from '../../../store/store'

class Greatfeedback extends Component {
    constructor(props) {
        super(props);
        this.state = { text: '' };
    }

    onBack = () => {
        this.props.history.push("/rating")
    }

    onSubmit = () => {
        this.props.history.push("/thanks")
    }

    render() { 

        store.subscribe(() => {      
            this.setState({
              text: store.getState().textareaReducer.textValue
            });
        });

        console.log(this.state.text)

        const outerDivStyle = {width: '85%', display: 'inline-block'}
        const innerDivStyle = {display: 'flex', justifyContent: 'space-between'}

        return (<>
        <ParakeetHeader />
        <div style={{width: '85%'}}>
        <Greatmessage />
        </div>

        <div style={outerDivStyle}>
        <div style={innerDivStyle}>
            <FeedbackBtns name="Food" />
            <FeedbackBtns name="Service" />
        </div>

        <div style={innerDivStyle}>
            <FeedbackBtns name="Pricing" />
            <FeedbackBtns name="Ambience" />
        </div>

        <div style={innerDivStyle}>
            <FeedbackBtns name="Cleanliness" />
            <FeedbackBtns name="Plating" />
        </div>
        </div>

        <Otherbtn />

        <div style={{marginTop: '1rem'}}>
        <Textarea label="We'd love to hear your feedback!"/>
        </div>

        <div style={outerDivStyle}>
        <div style={{...innerDivStyle, marginTop: '2rem'}}>
        <NavButton name="BACK" click={this.onBack} />
        <NavButton name="SUBMIT" click={this.onSubmit}/>
        </div>
        </div>

        </>);
    }
}

export default withRouter(Greatfeedback);

Вот мой код для компонента textarea:

import React, { Component } from 'react';

import TextField from '@material-ui/core/TextField';

import store from '../../../store/store'
import { connect } from 'react-redux';

class Textarea extends Component {

    render() { 

    const style = {
        width: '85%',
    } 

    return (<>
        <TextField style={style}
            value={this.props.textValue}
            onChange={this.props.inputChanged}
            id="filled-dense-multiline"
            label={this.props.label}
            margin="dense"
            variant="filled"
            multiline
            rowsMax="6"
            rows="6"
            color={this.props.color}
        />
    </>);
    }
}

const mapStatetoProps = (state) => {
    return {
        textValue: state.textValue
    }
}

const mapDispatchtoProps = (dispatch) => {
    return {
        inputChanged: (e) => {
            console.log('changed', e.target.value);
            const action = { type: 'TEXTAREA_CHANGE', text: e.target.value }
            store.dispatch(action)
        }
    }
}

export default connect(mapStatetoProps, mapDispatchtoProps)(Textarea);