Question

我目前正在使用SharePoint Framework（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简化器中处理，但现在已在产品简化器中完成：

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

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

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

1 个答案: