0

I'm trying to make a WordPress theme, with React + Redux. I'm using this Wp + React + Redux theme as an example: https://github.com/jackreichert/a-wp-react-redux-theme.

On the homepage I fetch all the posts with the WordPress API link. When I click on a post, I'm mounting another component, which fetches the content of just one single post with the WordPress API link. But the router goes to the other component, BEFORE the new content is fetched. So when I'm going from the Home component to the SinglePost component, it still displays all posts below eachother (for like 0.5seconds) untill Redux has Fetched the one single post.

How can I solve this issue? I've already tried to add Thunk and Promise, and I assume i've done it the right way.

You can see my current version at http://react-test.friendsagency.com/, and if you navigate through the routes you probably will understand what my problem is.

You can see my code on https://github.com/ludovers/wp-react-redux.

If you see jackreichert's example, you can see that after you click a route, it navigates to the component after redux has finished fetching the data. But I dont see many differences between his and my code.

I hope you understand my problem, and I hope someone can help me solve this issue.

Thanks!

coder14
  • 213
  • 2
  • 13
  • Sounds like a structuring issue.. Why do you still see the old posts even though you're no longer in that route? I would expect the previous route to unmount. – Omri Aharon May 30 '17 at 14:33
  • Thats because I'm loading the data async to each component – coder14 May 31 '17 at 07:51
  • Still.. if your route renders `AllPosts` component, and you switch to a different route, `AllPosts` should unmount and you should no longer see the posts. Async has nothing to do with it. – Omri Aharon May 31 '17 at 08:08
  • Can you give me an example what's the best way to unmount my current Redux state? – coder14 May 31 '17 at 08:26
  • That's the thing, your redux state can stay as it is, but your posts should only be rendered under one component, right? Once you navigate away from that route (and that component), they are no longer rendered and cant be seen on the page. – Omri Aharon May 31 '17 at 08:48
  • I have no clue what code I should put in my ComponentWillUnmount to make my 'posts' prop empty, so it can't be used in my next component – coder14 May 31 '17 at 13:16
  • Take a look at this random fiddle I found - https://jsfiddle.net/kahnaar/ufoj2644/ When you navigate to `view2`, if `view1` has posts as prop then `view1` unmounts (without any special action from you) and its render code is no longer rendered. That's just how React works. – Omri Aharon May 31 '17 at 14:59

0 Answers0