Как получить измененные значения состояния в componentDidMount (), в приложении Electron и React

Question

Мое приложение представляет собой комбинацию приложений Electron и React, и я новичок в React-Redux.Все работает хорошо, вместо двух проблем:

1- В render() секции Counter: {(counterVal)? counterVal: ''} counterVal не может измениться и значение в атрибуте круга fill={{(counterVal)? ''green: 'none'}} также не может измениться.

2- Функция countValue, которую я вызываю в классе ReceiveMessagesFromRabbitMQ.js, работает хорошо и меняет состояние counterVal, которое я хочу.Но я не могу получить измененное значение counterVal в componentDidMount() в MyCounter компоненте.

MyCounter.js

import React, { Component } from 'react'; import { bindActionCreators } from "redux"; import { connect } from "react-redux"; import { renderMessages, countValue } from './CounterAction'

import './SvgCss.css';

import { createStore, applyMiddleware } from 'redux'; import rootReducer from "../rootReducer"; //import thunk from 'redux-thunk';

var store = createStore(
    rootReducer,
    //applyMiddleware(thunk) );

var currentValue = 0;

class MyCounter extends Component{

    constructor(props) {
        super(props);
        // ...
        this.selectIclState = this.selectIclState.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount(){
        renderMessages
        store.subscribe(handleChange());
    }

    selectIclState(state){
        console.log('----selectIclState----: ', state.counterVal);
        return state.seepdLimit;
    }

    handleChange(){
        console.log('----handleChange----');

        let previousValue = currentValue;
        currentValue = this.selectIclState(store.getState());
        if (previousValue !== currentValue) {
            console.log(
                'Counter changed from',
                previousValue,
                'to',
                currentValue
            );
        }
    }

    render() {
        const { counterVal } = this.props;
        return (
            <svg id="L_1" data-name="L 1" xmlns="http://www.w3.org/2000/svg" width="1920" height="720" viewBox="0 0 920 420">

                <rect id="Background" width="1920" height="720" fill="none"/>

                <g id="SvgElement">
                    <circle cx="200" cy="100" r="50" fill={{(counterVal)? ''green: 'none'}}/>
                    <text className="cls-4" transform="translate(52.427 490.937)">
                        Counter: {(counterVal)? counterVal: ''}
                    </text>

                </g>
            </svg>
        );
    } }

const mapStateToProps = (state, props) => {
    return{
        counterVal: state.myReducer.counterVal,
    } };

const mapDispatchToProps = dispatch => bindActionCreators({
    countValue }, dispatch);

export default connect(
    mapStateToProps,
    mapDispatchToProps )(MyCounter);

CounterAction.js

import { COUNT_VALUE } from './myReducer';
import ReceiveMessagesFromRabbitMQ from './ReceiveMessagesFromRabbitMQ';

export const renderMessages = () => {
    let messagesFromRabbitMQ = new ReceiveMessagesFromRabbitMQ();
};

export const countValue = (val) => {
    return{
        type: COUNT_VALUE,
        seepdLimit: val,
    };
};

myReducer.js

export const COUNT_VALUE = 'COUNT_VALUE';

let initialState = {
    counterVal: 0, };

export default function iclReducer (state = initialState, action) {
    switch (action.type) {

        case COUNT_VALUE:
            return {
                ...state,
                counterVal: action.counterVal,
            };
        default:
            return state;

    } }

ReceiveMessagesFromRabbitMQ.js

import BaseElement from "./BaseElement/BaseElement";
import { countValue } from './CounterAction';

const electron = window.require('electron');
const ipcRenderer = electron.ipcRenderer;

class ReceiveMessagesFromRabbitMQ extends BaseElement {
    constructor() {
        super()
        ipcRenderer.on('*.amqp.message', (event, message) => { this._onMessage(JSON.parse(message)) })
    }

    _onMessage(data) {
        console.log(data)
        countValue(data.value);
    }

}

export default ReceiveMessagesFromRabbitMQ;

С этой структурой кода, как состояние counterVal может быть автоматически изменено в componentDidMount() или в любом месте в MyCounter компоненте от имени вызова countValue(data.value); в ReceiveMessagesFromRabbitMQ.js?

Потому что у меня естьединственная возможность изменить значение счетчика через

ipcRenderer.on('*.amqp.message', (event, message) => { this._onMessage(JSON.parse(message)) })

в ReceiveMessagesFromRabbitMQ.js с сервера RabbitMQ.

Answer 1

Действие, которое вы создаете с помощью countValue, передает объект с seepdLimit, но редуктор ожидает действие со свойством counterVal.

export const countValue = (val) => {
    return{
        type: COUNT_VALUE,
        seepdLimit: val, // this should be "counterVal: val" instead of seepdLimit
    };
};