3

Background

I am building an app with the following details

  • react
  • react-router
  • redux
  • it is universal javascript
  • node js

Problem

When routing with the Link tag from component to component it works perfectly. It calls the data that the component requires and renders the page. But when I click on a Link that uses the same component as the current one all I see is the url change.

Attempts

Things I have tried to get this to work.

Attempt 1

So far I have tried the steps in this question but the solution wont work for me. This was the code I implemented

componentWillReceiveProps(nextProps) {
    if (nextProps.article.get('id') !== this.props.article.get('id')) {
        console.log('i got trigggerd YESSSSSSSSSSSSSSS');
    }
}

But the variable nextProps is always the same as the current props.

Attempt 2

I decided to call the same code I use in componentWillMount but that didn't work either.

componentWillMount() {
    let { category, slug } = this.props.params;
    this.props.loadArticleState({ category, slug });
}

It just creates an infinite loop when I put this into componentWillReceiveProps.

Conclusion

I belief the problem is clicking the link never calls the data associated with it. Since the data is loaded with

static fetchData({ store, params }) {
    let { category, slug } = params;
    return store.dispatch(loadArticleState({ category, slug }));
}

Any help is appreciated.

Community
  • 1
  • 1
Joe Lloyd
  • 19,471
  • 7
  • 53
  • 81
  • Maybe try force [pushing](https://github.com/reactjs/react-router/blob/master/docs/API.md#pushpathorloc) the new history instead? – Yuya Jun 17 '16 at 13:36
  • where should this be pushed? in the main Article component or in the `Link to` tag? – Joe Lloyd Jun 17 '16 at 13:52
  • Instead of ``, it'll be a element (ex. button, span) with `onClick` that triggers `.push(/* whatever was in to= */)` – Yuya Jun 17 '16 at 14:00

2 Answers2

2

Solution I Used

I created a function to test if the previous data is the same as the changed data. 

compareParams(prevProps, props) {
    if (!prevProps || typeof prevProps.params !== typeof props.params) {
        return false;
    }
    return Object.is(props.params, prevProps.params);
}

So this tests

  • are there any previous props?
  • and then if the props are equal to the previous props?
  • then return false if there are if this is the case
  • if not then we see compare props and previous props parameters

In ComponentDidUpdate

In the compoonentDidUpdate we use this function to determine if the data should be updated

componentDidUpdate(prevProps) {
    if (this.compareParams(prevProps, this.props)) {
        return;
    }
    this.props[this.constructor.reducerName](this.props.params);
}

Conclusion

This code updates the body of a page that uses the same react component if it receives new data.

Joe Lloyd
  • 19,471
  • 7
  • 53
  • 81
0

maybe you can try use onChange event on Route component, check Route API and then signal to child component that refresh is needed...

Stanislav Šolc
  • 306
  • 3
  • 8