redux-simple-router - perform action based on URL

Question

I'm using Redux with redux-simple-router.

Here's what I'm trying to do. A user hits a URL like so: http://localhost:3000/#/profile/kSzHKGX Where kSzHKGX is the ID of the profile. This should route to Profile container filled out with the details of the profile with id kSzHKGX.

My routes look like this:

export default (
  <Route path="/" component={App}>
    ...
    <Route path="profile" component={Profile} />
    ...
  </Route>
)

So hitting the above link would give me Warning: [react-router] Location "undefined" did not match any routes

My container looks like this:

@connect(
  state => state.profile,
  dispatch => bindActionCreators(actionCreators, dispatch)
)
export class Profile extends Component {
  constructor(props) {
    super(props)
  }
  componentDidMount() {
    const { getProfileIfNeeded, dispatch } = this.props
    getProfileIfNeeded()
  }
  render() {
    return (
      <section>
      ...
      </section>
    )
  }
}

So normally my container would just be populated from the state as usual in Redux.

Basically I need to have a way of doing some wildcard in the route. Than I need to pass the URL to the action that would pull up the right profile from an API. The question is, is it doable with react-simple-router? Can I do that somehow using UPDATE_PATH? Would it be the proper Redux way? Or should I use something else?

I suspect there is something wrong with your Router configuration because you should not be getting undefined - perhaps the wrong or missing history? You might want to share that too. But for your URL, you'll need to define a path like profile/:id and then your component will receive a params object in its props that has the id of the profile you need. — Josh David Miller
– Josh David Miller, Commented Jan 7, 2016 at 22:13
What do you want to see in terms of history? </newb question> Now when I do the route as profile/:id, the app issues a request to the API to http://localhost:5000/profiles/undefined (???) — Dmitry Shvedov
– Dmitry Shvedov, Commented Jan 7, 2016 at 22:19
I meant how you're using a history library. E.g. the basic demo works out of the box, so how does yours differ? Can we see your implementation? And if log this.props on your Profile component, what do you see? — Josh David Miller
– Josh David Miller, Commented Jan 7, 2016 at 22:25
I'm using this boilerplate app: github.com/anorudes/redux-easy-boilerplate . History comes with it, I didn't change anything there. Yes, I do see the param.id in the props. So it's pretty clear to me what to do at this point. Thanks! — Dmitry Shvedov
– Dmitry Shvedov, Commented Jan 7, 2016 at 22:30

Dmitry Shvedov · Accepted Answer · 2016-01-25 23:34:37Z

Following Josh David Miller's advice, I made my route look like so:

<Route path="admin/profile/:id" component={Profile} />

Than my container got this method to get the profile from API:

componentWillMount() {
  const { getProfile, dispatch } = this.props
  getProfile(this.props.params.id)
}

And this to cleanup (without it I would have the previous profile display for split second on component load - before I hit API in componentWillMount)

componentWillUnmount() {
  this.props.unmountProfile()
}

Update:

As an alternative to the cleanup, I'm considering using the Container Component Pattern. Basically have the outer component do the data fetching and passing the data to the inner component as a prop.

Collectives™ on Stack Overflow

redux-simple-router - perform action based on URL

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related