使用 redux 跟踪最近查看的产品，可以吗？答案

【问题标题】：Use redux to track recent viewed product, is this ok?使用 redux 跟踪最近查看的产品，可以吗？
【发布时间】：2020-11-11 13:57:15
【问题描述】：

我是 ReactJS 的新手。为了显示最近浏览的产品，很多页面都说我们会使用 cookie。但我正在使用 redux 来做到这一点。我的想法是：每次访问者打开产品页面，我们都会将产品的信息（如ID）发送到redux的store。然后，我们只需要从 store 中获取数据。我没有看到任何人说这种方式，所以我有点担心我的解决方案。如果使用 cookie 更好，请您提供一个链接/网站来了解它。我搜索了很多页面，但没有详细信息，所以很难。非常感谢。

这是我的代码：

商店；

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;

产品页面，每次访问者打开时都会将产品 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)

从 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)

【问题讨论】：

标签： html reactjs cookies product render

【解决方案1】：

如果您只想记住用户浏览会话期间最后一次查看的产品，那么 redux 商店应该没问题。请记住，它只存在于内存中，因此如果用户关闭其选项卡或硬刷新页面，则存储不会持久化，您将在那里丢失任何信息。

将其设置在 cookie 中将使信息在刷新或关闭/重新打开后仍然存在，因为 cookie 在会话之间保持不变（假设您没有使用会话 cookie）。

【讨论】：