如何将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);

这样，当异化器来自不同的组件时，我就可以在异化器的单个状态下影响其单个属性，我希望这是正确的方法