1

現在、SharePoint Framework (SPFx) を使用してアプリを開発しており、Redux を使用する必要があります。

商品の在庫管理のことで、商品が少なくなった場合や商品の購入承認がある場合はお知らせがあります。

私のアプリケーションは、多かれ少なかれ次のような外観をしています。

メイン ビュー 通知の優先度をクリックすると、カテゴリ メニューと製品カードが次のように表示されます。

プライオリティ ビュー 使用できる機能は次のとおりです。

1.- カードのタイトルや説明などの任意のテキストによる検索 2.- 製品の種類に応じて動的なフィルタ 3.- カードの種類に応じてカテゴリ メニューが変化します 4.- カード製品の種類または選択した優先度に応じて変更します 5.- 画面をスクロールすると、さらに多くのカードが読み込まれます

私の問題は、React JS コードを React-Redux で書き直すことができなかったことです。

最初にすべてのコンポーネントをロードすることしかできず、同時に複数のコンポーネントの変更を伴う優先度やその他のイベントをクリックしたときに、製品とカテゴリ メニューを変更することができませんでした。

これらのコンポーネントの相互作用がどのように行われるかを少しのコードで例示することで、私を助けていただければ幸いです。

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

しかし、アクションとリデューサーはどのように相互作用して、フィルターを選択したときに製品のリストがフィルタリングされたり、通知の優先度を選択したときにカテゴリのメニューと製品のリストが変更されたりしますか?

4

1 に答える 1

0

複数のレデューサーから状態のプロパティに影響を与えたい場合は、単一のレデューサーでアクションを管理する必要があります。

商品タイプをクリックすると、アクションは 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 に答える