4

I am using react-router with the flux architecture (facebook's flux implementation).

Currently in my system I have route that says "chat/:topic".

When the user is entering this component, I am creating a subscription (using action creation, on componentWillMount) to a websocket server, and I am removing the subscription on componentWillUnmount.

When the user is moving to another route the whole workflow works alright - because react-router is unmounting my component.

When I transition inside my route (from "chat/games" to "chat/tv"), the component isn't mounted and I need to clear my state of the components.

I read about different actions that I can take and this on transition to dispatch an action "TRANSITION" and every relevant store will clear it's store.

In my opinion, this kind of action - is wrong, it couples my stores and my router.

How would you solve this problem? Is this an issue that I should raise to react-router and ask them to unmount inside my route?

Yosi
  • 2,936
  • 7
  • 39
  • 64

3 Answers3

6

I found the answer thanks to gaearon (https://github.com/gaearon/),

Use a store to keep the selected topic and ask the messages store for messages, in flux you shouldn't remove anything from your store, unless you need it for a performance reasons.

In my application, I must remove the messages (since they are large objects) and clear my subscriptions (to reduce the load on the server).

In order to achieve this there were three solutions that I found:

  1. Use componentWillReceiveProps and check if the params are changed, if the params are changed - do whatever you need in order to clear the store - for example call ActionCreator and reset the state.
  2. Send a dispose payload in transition (inside Router.run) which will tell all the stores to clear themselves.
  3. last solution (which I used) making sure that my components are unmounted - Why? It is too error prone to clear the state on componentWillReceiveProps/dispose and it is clearer to just ensure the components are unmounted.

Details on how to achieve this:

https://github.com/rackt/react-router/issues/292

https://github.com/rackt/react-router/issues/496#issuecomment-64152941

svnm
  • 22,878
  • 21
  • 90
  • 105
Yosi
  • 2,936
  • 7
  • 39
  • 64
1

I believe that compomentWillReceiveProps might solve your issue. This is what react router uses to pass stuff to you.

Ben S
  • 41
  • 4
1

As far as I know, you need to use both componentWillReceiveProps AND componentDid/WillMount to catch the initial render also.

I'm anxiously awaiting the react-router 1.0 release (this weekend?) in hopes that there is a more elegant way to do this.

Cam W
  • 11
  • 1
  • This is what I did eventually, but I think this is so hard in componentWillReceiveProps - because you need to make sure your cleared you state, while remount (unmount/mount) will much safer and cleaner way to do this. I hope react-router will fix this. – Yosi Jun 02 '15 at 19:41
  • Adding link for 1.0 changes - https://github.com/rackt/react-router/pull/1158, and it dosen't look like fixing this problem :( – Yosi Jun 02 '15 at 19:44