Components lose access to store when wrapped in <Grid> (react-inline-grid)

Question

I'm using react-inline-grid and as soon as I wrap my components with <Grid>, the wrapped components seem to loose their access to the store:

Uncaught TypeError: Cannot read property 'currentStep' of undefined

The code:

class App extends Component {

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch(loadData());
    }

    render() {
        return (
            <div>
                <Grid>
                        <Row>
                            <Cell>
                                <Stepper />
                            </Cell>
                        </Row>
                </Grid>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    app: state.app
});

export default connect(mapStateToProps)(App);

The extra div is because threw an error when I passed it an array of React components.

I tried this with different components and get a similar error each time. Also, the grid works when I'm inside an individual component.

Wrapping App is a Provider that hands down the store:

const MaterialApp = () => (
    <MuiThemeProvider>
        <App />
    </MuiThemeProvider>
);

injectTapEventPlugin();

ReactDOM.render(
    <Provider store={store}>
    <MaterialApp />
    </Provider>,
    document.getElementById('root')
);

Here's my container for Stepper for reference:

import { connect } from 'react-redux';
import AppStepper from '../components/Stepper/AppStepper';
import { selectStep, postNotification } from '../actions';

function handleChange(value, dispatch) {
    dispatch(selectStep(value));
    if (value === 2 || value === 3) {
        dispatch(postNotification('Coming soon!'));
    }
}

const mapStateToProps = (state, ownProps) => ({
    currentStep: state.app.currentStep
});

const mapDispatchToProps = (dispatch, ownProps) => ({
    handleChange: (value) => {
        handleChange(value, dispatch);
    }
});

const Stepper = connect(
    mapStateToProps,
    mapDispatchToProps
)(AppStepper);

export default Stepper;

And component:

import React, { Component } from 'react';
import {
    Step,
    Stepper,
    StepButton,
} from 'material-ui/Stepper';
import PropTypes from 'prop-types';

class AppStepper extends Component {

    constructor(props) {
        super();
    }

  render() {
        const currentStep = this.props.currentStep;
        const onChange = this.props.handleChange;

    return (
      <div style={{width: '100%', maxWidth: 700}}>
        <Stepper linear={false} activeStep={currentStep}>
          <Step>
            <StepButton onClick={() => onChange(0)}>
              Import Data
            </StepButton>
          </Step>
          <Step>
            <StepButton onClick={() => onChange(1)}>
              Select Layout
            </StepButton>
          </Step>
          <Step>
            <StepButton onClick={() => onChange(2)}>
              Finalize Layout
            </StepButton>
          </Step>
                    <Step>
            <StepButton onClick={() => onChange(3)}>
              Export
            </StepButton>
          </Step>
        </Stepper>
      </div>
    );
  }
}

export default AppStepper;

Answer 1

There is a problem with the react-inline-grid library that you are using. It internally uses redux and Grid component renders its own Provider which overrides your application's provider. So Stepper gets Grid's store instead of yours. That's why it doesn't know about currentStep.

I don't have a workaround to deal with this. But the issue has a comment about an alternative solution.