react-redux應用程序在同一頁面上有多個產品縮減器

Question

我正在使用一個現有的基於React-Redux的移動Web應用程序，其中有一個產品頁面，它基本上向用戶顯示與產品相關的信息，例如產品名稱，價格明細等。現在，此產品頁面本身就是SPA在這里，我有多個外匯子項。 產品詳細信息，價格詳細信息，運輸詳細信息等

從今天開始，我們維護一個productDetails精簡器，其中API在頁面加載時獲取數據並填充productDetails存儲，以便可以根據需要將相同的數據映射到mapStateToProps的各個子組件中。

現在需要完成一項增強功能，其中在同一個產品頁面SPA上，我需要在不同的reducer中維護兩種類型的產品數據（如Courier和Express），這些數據需要在單擊相應按鈕時顯示。 因此，假設當頁面加載“ Courier”產品時，productDetails reducer（已存在）中的數據將顯示在頁面加載本身上，如果用戶單擊“ Express”，則將一次從API提取數據並將其存儲在altProductDetails減速器（新的），將顯示給用戶。 此后，如果用戶從Courier單擊到Express或從Express單擊，則將從相關的reducer本身顯示數據，而不是再次從API獲取數據。

數據/歸約器的結構將相同，但數據將不同。

外匯。 整個減速器的一部分 ：

產品詳情

{
    productId: "CAKEEXP",
    productName: "Butterscotch Cake",
    productType: "Express",
    productPrice: {
        defaultPrice: 749,
        listPrice: 749,
        price: 749,
    }
}

altProductDetails

{
    productId: "CAKECOUR",
    productName: "Vanilla Cake",
    productType: "Courier",
    productPrice: {
        defaultPrice: 400,
        listPrice: 450,
        price: 450,
    }
}

方法1-我嘗試在頂級組件上編寫包裝器，該包裝器將在頁面加載時獲取產品數據（可以快遞或表達），數據將存儲在productDetails reducer中，並最終將其傳遞給以下組件中的所有子級組件父母對孩子。 一旦用戶單擊替代產品（可以快遞或快遞），該特定產品的數據將被提取一次，並將其放置在altProductDetails簡化器中，然后可以將其從父級傳遞到子級。

不完整，但類似：

import React from "react";
import { connect } from 'react-redux';
import {allActions, product_types} from "../../../actions/actions";
import BaseProductPanel from './base-product-panel'
import {PDPSkeleton} from "../../stock/page-load";
import C2A from "../../stock/c2a-button";

class ProductSwitchWrapper extends React.Component {

    constructor(props) {
        super(props);
    }
    componentWillMount(){
        if(this.props.productDetails.isFetching || !this.props.productDetails.productType){
            this.props.getProductDetails({productUrl: location.pathname, catalogId : process.env && process.env.NODE_ENV === 'development' ? _catalogId : currentCatalogId}).then(response => {
            });
        }
    }

    onButtonClick = (isEOrC) => {
        console.log('isEOrC', isEOrC);
        //Fetch alternate product data if not fetched already.  
    }

    render() {            
        if(this.props.altProductDetails.isFetching) {
            return(<PDPSkeleton/>);
        }else{
            return (
                <div id='main-con'>
                    <BaseProductPanel productDetails={this.props.altProductDetails}/>
                    <div className='button-class'>
                        <button className={this.props.altProductDetails.productType !== product_types.COURIER ? 'required-input' : ''} 
                            onClick={() => this.onButtonClick('E')}>Express</button>
                        <button className={this.props.altProductDetails.productType === product_types.COURIER ? 'required-input' : ''} 
                            onClick={() => this.onButtonClick('C')}>Courier Delivery</button>
                    </div>
                </div>
            )
        }
    }
}

function mapStatetoProps(state){
    return {
        productDetails: state.productDetails,
        altProductDetails: state.altProductDetails
    }
}

export default connect(mapStatetoProps, {
    getAltProductDetails : allActions.getAltProductDetails,
    getProductDetails : allActions.getProductDetails,
})(ProductSwitchWrapper);

這種方法的問題是，首先，我需要將當前的活動產品reducer（可以是productDetails或altProductDetails，具體取決於用戶是否選擇了快遞或快遞產品）傳遞給BaseProductPanel，並將其他子級組件從父級傳遞到子級，就像在child-中使用mapStateToProps級別的組件將導致使用來自Parent或mapStateToProps的props值發生沖突。

方法2-我可能沒有維護2個reducer，並且每次用戶從Express切換到Courier時，都可以通過單擊按鈕從API獲取相關數據（courier OR Express）並將其存儲在現有productDetails reducer中。 但這將導致不在用戶每次切換產品時直接使用存儲中的值並調用API。

能否請您提出采取這種方式的正確方法？

Answer 1

我認為在您的情況下，存儲數據的最有效方法是創建一個主要的產品減速器，它將兩個減速器結合在一起-

---

import { combineReducers } from 'redux';
import { courierReducer } from './courierReducer/courierReducer';
import { expressReducer } from './expressReducer/expressReducer';


const productDetalis = combineReducers({
   courier: courierReducer,
   express: expressReducer,
})

export default producetDetails

---

並分別處理每個Reducer數據獲取/存儲功能/偵聽器。

現在，此產品詳細信息“架子”將具有兩個“抽屜”，並且通過

---

 state.productDetalis.express

---

您可以在前端找到您要求商店提供的特定數據。