Use redux to track recent viewed product, is this ok? - html

Question

I am a newbie in ReactJS. To show the recent viewed product, many pages say that we will use cookie. But I am using redux to do it. My idea is: each time visitor open the product page, we will dispatch information of the product (suchs as ID) to store of redux. Then, we only need to get data from store. I don't see any one saying about this way so I am a bit worried about my solution. In case it's better to use cookies, could you please advise a link/ website to learn about it. I search many page but there's no details so it's so hard. Thank you so much.
Here my code:
Store;
const Viewed = [];
const Viewed_reducer = (init = Viewed, action) => {
switch (action.type) {
case "ADD_TO_VIEWED":
if (init.indexOf(action.id) === -1) {
init.push(action.id)
}
return init;
default:
return init;
}
}
const All_reducer = redux.combineReducers({
Viewed: Viewed_reducer
});
const Store = redux.createStore(All_reducer);
export default Store;
Product page, this will dispatch the product ID to Store each time visitor open:
import React, {useEffect} from 'react';
import urlSlug from "url-slug";
import {connect} from "react-redux";
import ProductsInfo from '../../../Data/ProductInfo';
import RecentViewed from './RecentViewed/RecentViewed';
const ProductDetail = (props) => {
const nameSlug = props.match.params.slug;
const {dispatch} = props;
const Product = ProductsInfo.find((product) => {
return urlSlug(product.name) === nameSlug
});
useEffect(() => {
dispatch({type: "ADD_TO_VIEWED", id: Product.id})
},[dispatch, Product])
return (
<section className="product-detail">
<RecentViewed key={`recent${Product.id}`}/>
</section>
);
};
const mapStateToProps = (state) => {
return {
Store: state
}
}
export default connect(mapStateToProps)(ProductDetail)
Component to render the data from Store:
import React from "react";
import ProductsInfo from "../../../../Data/ProductInfo";
import {connect} from "react-redux";
const RecentViewed = (props) => {
const {Viewed} = props.Store;
let viewedProducts = [];
Viewed.forEach((id) => {
ProductsInfo.forEach((product) => {
if (product.id === id){
viewedProducts.push(product)
}
})
})
return (
<div className="container-fluid also-container recent-viewed-container">
<div className="row">
<div className="col">
<div className="title">Sản phẩm vừa xem</div>
<div className="wrap outside">
{viewedProducts.map((product) => {
return (
// inside here we will show information of product such as name, image, etc
)
})}
</div>
</div>
</div>
</div>
);
};
const mapStateToProps = (state) => {
return {
Store: state
}
}
export default connect(mapStateToProps)(RecentViewed)

Answer 1

If you're only going to remember the last viewed product for the length of the user's browsing session, then the redux store should be fine. Just remember that it only exists in-memory, so if the user closes their tab or hard-refreshes the page, the store isn't persisted and you'll lose any information there.
Setting it in a cookie will make the information survive a refresh or close/reopen, since cookies are persisted between sessions (assuming you're not using a session cookie).