reduxで異なるコンポーネントの状態を更新する

Question

私はreactとreduxを使用してこのUIを作成しています。以下はUIのイメージです。 This is image of UI

現在、「カテゴリ」をクリックするとデータが表示されます。次に、マップされていないリンクをクリックすると、マップされていない「カテゴリ」の商品が表示されます。しかし、「Addons」をクリックしてからマップされていないリンクをクリックすると、マップされていない「カテゴリ」の商品が表示されます。どのようにして減速機を書いて、「アドオン」のマップされていない製品も表示するようにします。私の反応するメインファイルでは、（this.props.menu_items）を使用しているため、Addonsの後にマップされていないクリックされたときに 'Categories'のデータが表示されます。

---

これは私のレデューサーファイルです。

import { AppConstants } from '../constants'; 

const initialState = { 
    state: [], 
    menu_items: [], 
    menu_items_copy: [], 
    addon_items: [], 
    unmapped: false, 
}; 

    export default (state = initialState, action) => { 
    switch (action.type) { 
    case AppConstants.getMenuItems: 
     return { 
     ...state, 
     } 
    case AppConstants.getMenuItemsSuccess: 
     return { 
     ...state, 
    menu_items: action.menu_items,//This contains the data showed when 
    // 'categories' is clicked 
    menu_items_copy: action.menu_items, 
    unmapped: false, 
    } 
    case AppConstants.getAddonsItems: 
     return { 
     ...state, 
    } 
    case AppConstants.getAddonsItemsSuccess: 
    return { 
    ...state, 
    menu_items: action.addon_items,//Here I update the data to addons data 
    } 

    case AppConstants.showAllProducts: 
    return { 
     ...state, 
    menu_items: action.menu_items, 
    unmapped: false 
    } 

    case AppConstants.getUnmappedMenuItemsSuccess: 
    return { 
    ...state, 
    unmapped: true, 
    menu_items: state.menu_items_copy.filter((item) => {-->How do I write 
     here for action.addon_items also 
     return (item.productList.length == 0) 
    }) 
    } 
    case AppConstants.hideError: 
    return { 
     ...state, 
    error: null 
    } 
default: 
    return state 
} 
}; 

Answer 1

マップされていないがクリックされたときに、私は減速を経て変化するであろう唯一の状態はunmapped: true/falseを設定することです。

結合されたアイテムをビューに渡すポイントで派生させるために必要なすべての情報を既に持っているので、アイテム配列をフィルタリングして状態に戻す必要はありません。

あなたは両方のアイテムから導出された項目の単一のリストを生成するためにあなたの状態の関連する部分を組み合わせることselectorを使用することになり、これを行うためにここにhttp://redux.js.org/docs/recipes/ComputingDerivedData.html

を導出状態とセレクタについての記事を読むを持っています配列、unmappedフラグに応じて。 reselectライブラリは、パフォーマンスのためにメモをとっている間にこれを行うのに役立ちます。入力が変化した場合は再計算し、それ以外の場合は以前にキャッシュされた値を返します。

import {createSelector} from 'reselect' 

const selectMenuItems = state => state.menu_items 
const selectAddonItems = state => state.addon_items 
const selectUnmapped = state => state.unmapped 

const selectItemsToShow = createSelector(
    selectMenuItems, 
    selectAddonItems, 
    selectUnmapped, 
    (menuItems, addonItems, unmapped) => { 
    // if unmapped is set - combine all items and filter the unmapped ones 
    if (unmapped) { 
     return menuItems.concat(addonItems).filter(item => !item.productList.length) 
    } 
    // else just return the menu items unfiltered 
    return menuItems 
    } 
) 

// this selector can then be used when passing data to your view as prop elsewhere 
// or can be used in `connect` props mapping as in the linked example) 
<ItemsList items={selectItemsToShow(state)} />