使用redux跟踪最近观看的产品，这可以吗？

Question

我是ReactJS的新手。为了展示最近浏览过的产品，很多页面说我们将使用cookie。但我是用redux做的。我的想法是:每次访问者打开产品页面，我们都会把产品的信息(如ID)发送到redux的存储中。然后，我们只需要从商店获得数据。我没有看到有人这样说，所以我有点担心我的解决方案。如果使用cookie更好，你可以建议一个链接/网站来了解它。我搜索了很多页面，但是没有细节，所以很难。非常感谢。

这里我的代码：

1. 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;

1. 产品页面，这将在每次访问者打开时将产品ID分配到存储：

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)

1. 组件来呈现来自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

如果您只想记住用户浏览会话长度的最后一次查看产品，那么redux存储应该是可以的。请记住，它只存在于内存中，所以如果用户关闭他们的选项卡或硬刷新页面，商店就不会持久化，您将失去任何信息。

在cookie中设置它将使信息在刷新或关闭/重新打开时存活下来，因为cookie在会话之间被持久化(假设您没有使用会话cookie)。