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;

通过这种代码结构，如何代表在{{1}中调用counterVal的情况下自动在componentDidMount()或MyCounter组件中的任何位置更改countValue(data.value);的状态}？

因为，我唯一的选择是通过

更改计数器的值

ReceiveMessagesFromRabbitMQ.js

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

在RabbitMQ服务器中。

Answer 1

使用countValue创建的动作将传递带有seepdLimit的对象，但化简器将等待具有counterVal属性的动作。

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

如何在Electron和React应用程序中的componentDidMount（）中接收状态的更改值

1 个答案: