How to pass redux state to sub routes?

Question

I have a hard time understanding how to use redux together with react-router.

index.js

[...]

// Map Redux state to component props
function mapStateToProps(state)  {
  return {
    cards: state.cards
  };
}

// Connected Component:
let ReduxApp = connect(mapStateToProps)(App);

const routes = <Route component={ReduxApp}>
  <Route path="/" component={Start}></Route>
  <Route path="/show" component={Show}></Route>
</Route>;

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

App.js

import React, { Component } from 'react';

export default class App extends React.Component {
  render() {
    const { children } = this.props;
    return (
      <div>
      Wrapper
        {children}
      </div>
    );
  }
}

Show.js

import React, { Component } from 'react';

export default class Show extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ul>
        {this.props.cards.map(card => 
          <li>{card}</li>
        )}
      </ul>
    );
  }
}

This throws

Uncaught TypeError: Cannot read property 'map' of undefined

The only solution I've found is to use this instead of {children}:

{this.props.children &&
 React.cloneElement(this.props.children, { ...this.props })}

Is this really the proper way to do it?

Does this answer your question? [Line 0: Parsing error: Cannot read property 'map' of undefined](https://stackoverflow.com/questions/62079477/line-0-parsing-error-cannot-read-property-map-of-undefined) — Henke, Mar 23 '22 at 14:03

score 3 · Answer 1 · answered Jan 14 '16 at 19:04

Use react-redux

In order to inject any state or action creators into the props of a React component you can use connect from react-redux which is the official React binding for Redux.

It is worth checking out the documentation for connect here.

As an example based on what is specified in the question you would do something like this:

import React, { Component } from 'react';
// import required function from react-redux
import { connect } from 'react-redux';

// do not export this class yet
class Show extends React.Component {
  // no need to define constructor as it does nothing different from super class

  render() {
    return (
      <ul>
        {this.props.cards.map(card => 
          <li>{card}</li>
        )}
      </ul>
    );
  }
}

// export connect-ed Show Component and inject state.cards into its props.
export default connect(state => ({ cards: state.cards }))(Show);

In order for this to work though you have to wrap your root component, or router with a Provider from react-redux (this is already present in your sample above). But for clarity:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';

import { createStore } from 'redux';
import { Provider } from 'react-redux';

import reducers from './some/path/to/reducers';

const store = createStore(reducers);

const routes = <Route component={ReduxApp}>
  <Route path="/" component={Start}></Route>
  <Route path="/show" component={Show}></Route>
</Route>;

ReactDOM.render(
  // Either wrap your routing, or your root component with the Provider so that calls to connect have access to your application's state
  <Provider store={store}>
    <Router>{routes}</Router>
  </Provider>,
  document.getElementById('root')
);

If any components do not require injection of any state, or action creators then you can just export a "dumb" React component and none of the state of your app will be exposed to the component when rendered.

score 0 · Answer 2 · answered Oct 20 '15 at 15:00

0

I solved it by explicitly mapping the state with connect in every component:

export default connect(function selector(state) {
  return {
    cards: state.cards
  };
})(Show);

This way I can decide what properties of the state the component should have access to as well, polluting the props less. Not sure if this is best practice though.

answered Oct 20 '15 at 15:00

user2906759

821
1
9
15

I think you don't need to do it in every component, just your Top-Level and Route Handler Components. In your example Show is a Route Handler so it is totaly fine to use connect (this is what is called a smart or container component). All the components below it (Presentational or dumb components) should get their state as props from the Smart components. take a look here: http://redux.js.org/docs/basics/UsageWithReact.html – woolagaroo Nov 18 '15 at 19:52
could you please give some simple examples on how to do this correctly ? – farukg Nov 23 '15 at 13:51

How to pass redux state to sub routes?

2 Answers2

Linked