如何将SPFx和Reactjs更改为SPFx React-Redux？

Question

我目前正在开发一个与SharePoint框架(SPFx)的应用程序，我需要使用Redux。

它是关于控制产品的库存，当产品很少的时候会有通知，并且有产品采购审批。

我的应用程序或多或少具有以下外观：

Main View通过单击通知的优先级，它将更改类别菜单和产品卡片，并以以下方式显示自己：

Priority View您拥有的功能是：

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

当您想要从多个缩减程序中影响状态的属性时，必须在单个缩减程序中管理操作。

单击产品类型时，操作是在MenuCategory reducer中处理的，但现在是在产品reducer中完成的：

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;
    }
}

在使用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);

通过这种方式，我能够在减速器的单个状态下影响来自不同组件的单个属性，我希望这是正确的方法