CODEWITHSUNDEEP
reactjsreact-reduxreact-router-reduxreact-router-v4
Julien
Julien

Reputation: 25

Can't get props from Redux Connect() in React Router 4 nested route

I'm trying to access props from Redux connect() in my nested route. But can't get it work..

I have the following components:

main.js const initState = {};

const history = createBrowserHistory();
const store = configureStore(initState, history);

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

In app.js I set up few routes

class App extends Component {
  render() {
    return (
      <Switch>
        <Route path="/auth" component={Auth} />
        <Route exact path="/" component={Home} />
      </Switch>
    );
  }
}

export default withRouter(App);

Then in Auth component

function Auth(props) {
  return (
    <div>
      <Route exact path={`${props.match.path}/login`} component={Login} />
    </div>
  );
}
export default withRouter(Auth);

And finally my Login component

export class Login extends Component {
  login({email, password}) {
    this.props.login({ email, password });
  }

  render() {
    return (
      <Form
        onSubmit={(credentials) => this.login(credentials)} />
    );
  }
}

Login.propTypes = {
  login: PropTypes.func
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (credentials) => dispatch(loginRequest(credentials))
  };
}

export default connect(null, mapDispatchToProps)(Login);

Triggering this.props.login({ email, password }); should dispatch my loginRequest(credentials) actions.

However I get a this.props.login is not a function error. Actually no props is set in my Login component..connect() seems to have not effect at all.

The parents have access to props injected by connect(), however this 2nd level route, can't get the props that it's supposed to receive..

I hope it's clear enough.. Am I missing something ? Any idea about what could go wrong ?

Thanks for any help !

Upvotes: 0

Views: 588

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281626

Remove export while defining the logic class from export class Login extends Component { and make sure you are importing logic as a default component like import Login from '/path/to/Login

class Login extends Component {
  login({email, password}) {
    this.props.login({ email, password });
  }

  render() {
    return (
      <Form
        onSubmit={(credentials) => this.login(credentials)} />
    );
  }
}

Login.propTypes = {
  login: PropTypes.func
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (credentials) => dispatch(loginRequest(credentials))
  };
}

export default connect(null, mapDispatchToProps)(Login);

Upvotes: 1

Related Questions