Request of feature flag immediately after ldClient.on('ready') returns undefined about js-client-sdk

[apucacao]

Hi @miymiy ,

Yes, when the ready event is emitted, the SDK is ready to give you flag values.

Could you share your initialization code? Also, do you see any errors in the browser console?

[miymiy]

Hey @apucacao ,

Thanks for responding! Here are the code snippets (think majority of it is a copy from ldRedux). There were no errors in console.

On init

export default (clientSideId, reduxStore, user) => {
    let newUser = user;
    if (!newUser) {
        newUser = createUser();
    }

    window.ldClient = ldClient.initialize(clientSideId, newUser);
    window.ldClient.user = newUser;
    window.ldClient.on('ready', () => {
        reduxStore.dispatch(setLDReady());
    });
};

setLDReady sets the state.LD.isLDReady flag to true. And then the wrapper component

export default (WrappedComponent) => {
    class WithFeatureFlags extends Component {
        constructor(props) {
            super(props);
            this.initialise = this.initialise.bind(this);
            this.updateUser = this.updateUser.bind(this);
            this.isLDReady = this.isLDReady.bind(this);
            this.subscribeToFlagChanges = this.subscribeToFlagChanges.bind(this);
            this.state = {
                initialised: false,
            };
        }

        componentDidMount() {
            if (this.isLDReady()) {
                this.initialise();
                this.updateUser();
            }
        }

        componentWillReceiveProps(newProps) {
            if (this.isLDReady()) {
                this.initialise();

                if (!isEqual(newProps.userData, this.props.userData)) {
                    this.updateUser();
                }
            }
        }

        isLDReady() {
            const state = this.context.store.getState();

            return state.LD.isLDReady;
        }

        subscribeToFlagChanges(flagNameInLd, flagNameInState) {
            const { dispatch } = this.context.store;

            ldClient.on(`change:${flagNameInLd}`, (current) => {
                const newFlagValues = {};
                newFlagValues[flagNameInState] = current;

                dispatch(setFlags(newFlagValues));
            });
        }

        initialise() {
            if (this.state.initialised) {
                return;
            }

            const { dispatch } = this.context.store;
            const flagValues = {};

            this.props.flags.forEach((flagNameInLd) => {
                const flagNameInState = camelCase(flagNameInLd);
                flagValues[flagNameInState] =
                    ldClient.variation(flagNameInLd, ldDefaultValues[flagNameInLd]);
                /*****************************
                  ldClient returns undefined for the value: flagNameInLd
                *****************************/
                this.subscribeToFlagChanges(flagNameInLd, flagNameInState);
            });

            dispatch(setFlags(flagValues));

            this.setState({
                initialised: true,
            });
        }

        updateUser() {
            const currentUser = window.ldClient.user;
            const ldCustom = { ...currentUser.custom, ...this.props.userData.custom };
            const ldUser = { ...currentUser, ...this.props.userData };
            ldUser.custom = ldCustom;

            window.ldClient.identify(ldUser);
            window.ldClient.user = ldUser;
        }

        render() {
            const state = this.context.store.getState();
            const flagValues = getFlags(state, this.props.flags);

            return <WrappedComponent {...this.props} flagValues={flagValues} />;
        }
    }

    WithFeatureFlags.propTypes = {
        userData: PropTypes.ldUser,
        // eslint-disable-next-line react/forbid-prop-types
        flags: PropTypes.arrayOf(PropTypes.string).isRequired,
    };

    WithFeatureFlags.contextTypes = {
        store: PropTypes.object.isRequired,
    };

    return WithFeatureFlags;
};

[eli-darkly]

Hi - sorry we did not check in again on this issue earlier. Your code sample looked good as far as we could tell, so it wasn't clear what was going on. I do see however that ld-redux seems to have changed significantly since then, so I'm wondering whether you are using the new version and if so, have you still seen any similar problems?