Static Field Issue with React Redux Spa #813

New Issue

fergalmoran · 2025-08-09T17:17:46Z

fergalmoran commented

2025-08-09 17:17:46 +00:00

Originally created by @DanHarman on 4/21/2017

Run into something rather odd, which I think may be linked to the build chain from this template. I'm trying to use a static member within a component and it's coming up as undefined within the component.

To recreate, take the default template and modify Counter.tsx as follows (note addition of static myVal and logging of it in 3 places):

import * as React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { ApplicationState }  from '../store';
import * as CounterStore from '../store/Counter';
import * as WeatherForecasts from '../store/WeatherForecasts';

type CounterProps = CounterStore.CounterState & typeof CounterStore.actionCreators;

class Counter extends React.Component<CounterProps, void> {
    static myVal: number = 0;

    constructor(props: CounterProps) {
        super(props);
        console.log("Constructor", Counter.myVal);
    }


    public render() {
        console.log("Render", Counter.myVal);
        return <div>
            <h1>Counter</h1>

            <p>This is a simple example of a React component.</p>

            <p>Current count: <strong>{ this.props.count }</strong></p>

            <button onClick={ () => { this.props.increment() } }>Increment</button>
        </div>;
    }
}

console.log("External", Counter.myVal);

// Wire up the React component to the Redux store
export default connect(
    (state: ApplicationState) => state.counter, // Selects which state properties are merged into the component's props
    CounterStore.actionCreators                 // Selects which action creators are merged into the component's props
)(Counter);

The output is as follows:

External 0
Constructor undefined
Render undefined

However if we contrast to my codepen, its doesn't happen there: https://codepen.io/mmph/pen/KmzOMa

*Originally created by @DanHarman on 4/21/2017* Run into something rather odd, which I think may be linked to the build chain from this template. I'm trying to use a static member within a component and it's coming up as undefined within the component. To recreate, take the default template and modify `Counter.tsx` as follows (note addition of static myVal and logging of it in 3 places): ```typescript import * as React from 'react'; import { Link } from 'react-router'; import { connect } from 'react-redux'; import { ApplicationState } from '../store'; import * as CounterStore from '../store/Counter'; import * as WeatherForecasts from '../store/WeatherForecasts'; type CounterProps = CounterStore.CounterState & typeof CounterStore.actionCreators; class Counter extends React.Component<CounterProps, void> { static myVal: number = 0; constructor(props: CounterProps) { super(props); console.log("Constructor", Counter.myVal); } public render() { console.log("Render", Counter.myVal); return <div> <h1>Counter</h1> <p>This is a simple example of a React component.</p> <p>Current count: <strong>{ this.props.count }</strong></p> <button onClick={ () => { this.props.increment() } }>Increment</button> </div>; } } console.log("External", Counter.myVal); // Wire up the React component to the Redux store export default connect( (state: ApplicationState) => state.counter, // Selects which state properties are merged into the component's props CounterStore.actionCreators // Selects which action creators are merged into the component's props )(Counter); ``` The output is as follows: ``` External 0 Constructor undefined Render undefined ``` However if we contrast to my codepen, its doesn't happen there: https://codepen.io/mmph/pen/KmzOMa

fergalmoran closed this issue

2025-08-09 17:17:46 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#813