如何將SPFx和Reactjs更改為SPFx React-Redux？

Question

我目前正在使用SharePoint Framework（SPFx）開發應用程序，並且需要使用Redux。

它與控制產品庫存有關，當產品很少且有產品購買批准時會發出通知。

我的應用程序或多或少具有以下外觀：

主視圖通過單擊通知的優先級，它將更改類別菜單和產品卡，並以以下方式顯示：

優先級視圖您具有的功能是：

1.-搜索是通過任何文本進行的，例如卡的標題或說明2.-過濾器是動態的，取決於產品的類型3.-類別菜單根據卡的類型而變化4.-卡根據產品類型或選擇的優先級進行更改。5.-在屏幕上滾動時，會加載更多的卡

我的問題是我無法使用React-Redux重新編寫React JS代碼。

我只設法最初加載了所有組件，並且當它們單擊優先級以及涉及多個組件的同時更改的其他事件時，我沒有設法更改產品和類別菜單。

如果您可以通過舉例說明一些代碼如何實現這些組件的交互來幫助我。

ProductsActions.ts

export function loadProducts(data, webUrl) {
    console.log('Load Products...');
    if(data == null) {
        return function(dispatch) {
            return Data.getProducts().then(products => {
                dispatch({
                    type: ActionTypes.LoadProducts,
                    cards
                });
            });
        }
    }
}

productsReducer.ts

export default function productsReducer(state = initalState.products, action) {
    switch(action.type) {
            case ActionTypes.LoadProducts:
                let allProducts = [...state, ...action.products];
                return objectAssign(
                    {},
                    state,
                    {
                        products: allProducts
                    }
        );
            default:
                return state;
    }
}

productsContainer.ts

export default connect(
    (state) => {
        console.log(state);
        return {
            products: state.filterProducts
        };
    }
)(ProductsViewer);

Dashboard.tsx

export default class Dashboard extends React.Component<{Some Props}> {
  public render(): React.ReactElement<{Some Props}> {
    return (
      <div>
        <SearchBar />
        <Notifications />
        <Filters />
        <MenuCategory />
        <ProductsContainer />
      </div>
    );
  }
}

但是操作和縮減程序是如何交互的，以便在選擇過濾器時過濾產品列表，或者在選擇通知的優先級時更改類別和產品列表菜單

Answer 1

當您想影響多個Reducer的狀態屬性時，必須在單個Reducer中管理動作。

單擊產品類型時，該操作已在MenuCategory簡化器中處理，但現在已在產品簡化器中完成：

ProductsReducer.ts

export default function productsReducer(state = [], action) {
    switch(action.type) {
            case ActionTypes.LoadProducts:
                let allProducts = [...state, ...action.products];
                return objectAssign(
                    {},
                    state,
                    {
                        products: allProducts
                    }
                );
            case ActionTypes.ViewProductsByType:
                console.log(state);
                return objectAssign(
                    {},
                    state,
                    {
                    typeProducts: action.pType
                    }
                );
            default:
            return state;
    }
}

選擇產品類型時處理click事件是通過bindActionCreators完成的

MenuCategoryContainer.ts

import { connect } from "react-redux";
import { bindActionCreators } from "../../../../node_modules/redux";
import { viewCardByType } from "../actions/menuCategoryActions";
import { loadCategoryMenu } from '../reducers';
import MenuCategory from '../components/menuCategory/MenuCategory';

export default connect(
    (state) => {
        console.log(state);
        return {
            menuItems: loadCategoryMenu(state)
        };
    }, (dispatch) => {
        return {
            onClickType: bindActionCreators(viewProductByType, dispatch)
        };
    }
)(MenuCategory);

這樣，當異化器來自不同的組件時，我就可以在異化器的單個狀態下影響其單個屬性，我希望這是正確的方法