Menu
I'm using Redux, redux-router and reactjs.
I'm trying to make an app where I fetch information on route change, so, I've something like:
<Route path="/" component={App}> <Route path="artist" component={ArtistApp} /> <Route path="artist/:artistId" component={ArtistApp} /> </Route> When someone enters to artist/<artistId> I want to search for the artist and then render the information. The question is, what it's the best way of doing this?
I've found some answers about it, using RxJS or trying a middleware to manage the requests. Now, my question is, Is this really necessary or just a way to keep the architecture react-agnostic? Can I just fetch the information I need from react componentDidMount() and componentDidUpdate() instead? Right now I'm doing this by triggering an action in those functions that request information and the component re-renders when the information has arrived. The component has some properties for letting me know that:
{ isFetching: true, entity : {} } Thanks!
214
To detect route change with React Router, we can use the useLocation hook. import { useEffect } from "react"; import { useLocation } from "react-router-dom"; const SomeComponent = () => { const location = useLocation(); useEffect(() => { console. log("Location changed"); }, [location]); //... };
Using Link So when we click on the Register link, it will redirect to the /register route. But Link also allows us to pass additional data while redirecting. Here, at the place of data_you_need_to_pass , we can pass a string or object , array and so on and in the /register route we will get that data in props.
You can use the connected-react-router library (formerly known as react-router-redux ). Their Github Repo details the steps for the integration. Once the setup is complete, you can now access the router state directly within Redux as well as dispatch actions to modify the router state within Redux actions.
Now, my question is, Is this really necessary or just a way to keep the architecture react-agnostic? Can I just fetch the information I need from react componentDidMount() and componentDidUpdate() instead?
You can totally do that in componentDidMount() and componentWillReceiveProps(nextProps).
This is what we do in real-world example in Redux:
function loadData(props) { const { fullName } = props; props.loadRepo(fullName, ['description']); props.loadStargazers(fullName); } class RepoPage extends Component { constructor(props) { super(props); this.renderUser = this.renderUser.bind(this); this.handleLoadMoreClick = this.handleLoadMoreClick.bind(this); } componentWillMount() { loadData(this.props); } componentWillReceiveProps(nextProps) { if (nextProps.fullName !== this.props.fullName) { loadData(nextProps); } /* ... */ } You can get more sophisticated with Rx, but it's not necessary at all.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
