1

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

仪表板.tsx

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

但是 action 和 reducer 如何交互，以便在选择过滤器时过滤产品列表或在选择通知的优先级时更改类别菜单和产品列表

4

1 回答 1

0

当你想影响来自多个 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;
    }
}

选择产品类型时处理点击事件是使用 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);

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

于 2018-08-08T15:02:14.637 回答