React/Redux: Where are my props?

Question

This is my first time putting together a new app with this stack. Previously, I worked on an inherited one at another gig where the plumbing was already setup. My props are undefined and I need to know why. Please make suggestions, too. Here's the abridged code:

index.js

const store = createStore(rootReducer);
render(<Root store={store} />, document.getElementById("root"));

Root.js

const Root = ({ store }) => (
  <Provider store={store}>
    <Router>
      <Route path="/:filter?" component={App} />
    </Router>
  </Provider>
);
Root.propTypes = {
  store: PropTypes.object.isRequired
};
export default Root;

App.js

const App = ({ classes }) => ( // SHOULDN'T THIS BE DESTRUCTURED FROM PROPS?
  <div className={classes.root}> // <== UNDEFINED...WHY NO PROPS?
    <Grid container spacing={24}>
      <Grid item xs={12}>
        <AppBar />
      </Grid>     
    </Grid>
  </div>
);

export default withRoot(compose(connect())(App));

withRoot.js (creates a default theme from Material-UI)

const theme = createMuiTheme({
  palette: {
    type: "dark"
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    fontSize: 14,
    fontWeightLight: 300,
    fontWeightRegular: 400,
    fontWeightMedium: 500
  }
});

function withRoot(Component) {
  function WithRoot(props) {
    // MuiThemeProvider makes the theme available down the React tree
    // thanks to React context.
    return (
      <MuiThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...props} />
      </MuiThemeProvider>
    );
  }

  return WithRoot;
}

export default withRoot;

no mapStateToProps in connect - you should pass part of store — xadm, Aug 09 '18 at 17:25

score 1 · Answer 1 · answered Aug 09 '18 at 17:26

1

You need to pass connect a function that maps your state to props

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

export default withRoot(compose(connect(mapStateToProps))(App));

answered Aug 09 '18 at 17:26

sliptype

2,804
1
15
26

I forgot to add that I'm using Material-UI. Also, non-SFC components father upstream are getting their props okay via this.props. I updated my post. Does you answer still apply? – Big Daddy Aug 09 '18 at 17:36
If the props are making their way to App.js, then classes should be destructured from props (provided they're in state). Right? Props, however, are undefined. – Big Daddy Aug 09 '18 at 17:56
You are connecting your App component to the store but I think you might need to connect the higher order withRoot component to the store instead. Currently, WithRoot has no context to work with. `connect()(withRoot(App))` – sliptype Aug 09 '18 at 18:16
Is this what you mean? "export default withRoot(App);" and "export default compose(connect())(withRoot);" This gives me the bogus "TypeError: Cannot call a class as a function". – Big Daddy Aug 09 '18 at 18:53

score 1 · Answer 2 · answered Aug 09 '18 at 17:55

1

You're probably looking for theme object passed as prop. Material-UI uses context api, not redux.

withTheme()(Component) => Component

Provide the theme object as a property of the input component.

answered Aug 09 '18 at 17:55

xadm

8,219
3
14
25

Isn't that already being taken care of in withRoot with this line: ?? – Big Daddy Aug 09 '18 at 18:01
isn't it a provider part (one for all) - not context 'consumer' (for components needed it) ? – xadm Aug 09 '18 at 18:04
Sorry, I don't understand your question. – Big Daddy Aug 09 '18 at 18:11
It's a bit tricky when you're connecting to context just in place where it's created. If you would use theme in AppBar then you would use `withTheme()(AppBar)` to `consume theme context`. When you need it 'at root' then probably you need `withRoot(withTheme()(App))` or use withTheme in compose beside redux's connect. https://stackoverflow.com/questions/51265319/using-compose-and-connect-together-in-react-js-redux – xadm Aug 09 '18 at 18:19
I added withTheme() inside the compose() in App.js and "withRoot(withTheme()(App))" - no luck. Is that what you suggested? – Big Daddy Aug 09 '18 at 18:35
sth like that or `compose( withRoot, withTheme(), connect(mapStateToProps, mapDispatchToProps)` )(App) check structure (order matters) and props in react tab, look for `theme` – xadm Aug 09 '18 at 18:43
why do you expect `classes` object? is it defined elsewhere? – xadm Aug 09 '18 at 19:16
Material UI adds the classes to the props. Doesn't it? I've always deconstructed it with no problem. – Big Daddy Aug 09 '18 at 21:35
when used `withStyles()` - `theme` prop exists on App? – xadm Aug 09 '18 at 21:48
I'm not sure what your asking, sorry? A problem is that we can't add extensions to Chrome. So, no React of Redux tools to help :( – Big Daddy Aug 09 '18 at 21:59
uppps, it hurts ... try to `console.log(props.theme)`? – xadm Aug 09 '18 at 22:03
Added it to App.js, "const App = ({ classes }) => { console.log(props.theme);" - and get this in browser - " 'props' is not defined no-undef" – Big Daddy Aug 09 '18 at 22:09
try `const App = (props) => { ` – xadm Aug 09 '18 at 22:11
undefined...and this goes back to my original posting. Where are the props? I set something up wrong. – Big Daddy Aug 09 '18 at 22:20
any props? from route? – xadm Aug 09 '18 at 22:26

React/Redux: Where are my props?

2 Answers2