Fluxible context and executeAction in child react components

Question

Using the FluxibleMixin I can access the executeAction and getStore methods in a component as expected.

Using ES6 style component classes without Mixins, my top level component (under react-router) receives the context as expected, but for child components it seems I have to explicitly ask for the component context on demand.

For example, under my Application component, I have the following:

import React from 'react';
import setUserName from '../actions/setUserName';
import UserStore from '../stores/ProfileStore';
import {provideContext} from 'fluxible/addons';

/**
 *
 */
class Home extends React.Component {

    constructor (props) {
        super(props);
        this.state = props.state;
    }

    handleClick (event) {
        context.getComponentContext().executeAction(setUserName, {name:this.state.name});
    }

    handleNameEntry (event) {
        this.setState({name:event.target.value});
    }

    render () {
        return (
            <div>
                <h1>Enter your name to start</h1>
                <input type="text" onChange={this.handleNameEntry.bind(this)} />
                <input type="button" value="Find me" onClick={this.handleClick.bind(this)} />
            </div>
        );
    }
}

export default Home;

This works, in that the handleClick method successfully calls the executeAction method, but I'm not sure this is correct.

Should I need to explicitly call context.getComponentContext() when I want to use context methods?

Why is context.executeAction available directly on the parent component but not this one?

Answer 1

Context members are only available directly in React classes if you explicitly request them using contextTypes:

class Home extends React.Component {}

Home.contextTypes = {
    getStore:      React.PropTypes.func.isRequired,
    executeAction: React.PropTypes.func.isRequired
};

After that you will be able to do context.executeAction from inside your component. You should only use provideContext once on your top-level component.