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

【问题标题】：How do I change SPFx and Reactjs to SPFx React-Redux?如何将 SPFx 和 Reactjs 更改为 SPFx React-Redux？
【发布时间】：2018-08-08 23:02:14
【问题描述】：

我目前正在使用 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);

仪表板.tsx

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

但是，操作和还原器如何相互作用，以便在选择过滤器时过滤产品列表或选择通知的优先级时，类别菜单和产品列表被更改

【问题讨论】：

标签： reactjs react-redux spfx

【解决方案1】：

当您想影响来自多个 reducer 的状态属性时，您必须在单个 reducer 中管理操作。

单击产品类型时，该操作在 MenuCategory reducer 中处理，但现在在 product 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);

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

【讨论】：