0

I am working on a Redux app and I have come across a particular situation that I don't know how to handle.

Let's say I have a ProductsList page: example.com/products

On this page, I am dispatching the getProducts redux action and it calls the API and stores the products in the store.

And on this page, I list all the products. Now, the user clicks on a product and a new URL is pushed like: example.com/products/product/1

And on this ProductDetails page, a redux action called setCurrentProduct gets dispatched.

So far, it is good.

But the problem happens, when the user visits the URL example.com/products/product/1 directly.

In that case, the setCurrentProduct action gets dispatched but it fails because there are no products in the store yet.

I think I can add an if-else statement to this ProductDetails page and check if the products are not present in the store, then first dispatch the getProducts and then setCurrentProduct.

But I feel this is a hacky solution.

Maybe, I am wrong and this is the actual solution.

Can someone please guide me on whether this solution is correct, if not, then what is the correct solution.

PS: I am using NextJS.

Kamal Choudhary
  • 21
  • 3

1 Answers1

0

I think the back-end service should provide two APIs:

  • /api/products - Return product list DTOs, the DTO should contain basic info of a product.
  • /api/product/:id - Return the product detail DTO, the DTO should contain full detail of a product.

For the front-end, the example.com/products route should call the /api/products API.

The examlpe.com/product/:id should call the /api/product/:id API.

You don't need any conditional statements. The details page does not depend on the Redux state of the list page.

The state structure in redux store can be(non-normalized, just for demo):

state = {
  products: { status: 'idle', data: [], error: null },
  productDetail: { status: 'idle', data: {}, error: null }
};

The product list component uses the state.products, the product detail component uses the state.productDetail.

When a user accesses the product detail directly, the component should launch a new API call to get the product detail.

It's not related to NextJs or any other framework.

Lin Du
  • 88,126
  • 95
  • 281
  • 483
  • Hi @slideshownp2, thanks for taking the time to answer my question. Your solution totally makes sense and I agree with you. But there are probably more than one ways to handle this problem. – Kamal Choudhary Dec 22 '21 at 08:13
  • If we think of user journey like he visits the ```example.com/products``` page first and then goes to ```example.com/products/product/1``` page, maybe loading ```products``` on the first page and then setting the current product by getting data from ```products``` array can save us one extra API call. but that way, we can't handle the scenario I posted in the question. Maybe, using a conditional statement, we can do that. Relevant question: https://stackoverflow.com/questions/67943891/loading-redux-items-into-state-from-a-direct-link – Kamal Choudhary Dec 22 '21 at 08:22