Reactjs 在更新不同组件时保留redux存储

这是我的文件

export default (state = initialState, action) => {
switch (action.type) {
case AppConstants.getMenuItems:
  return {
    ...state,
    isLoading: true
  }
case AppConstants.getMenuItemsSuccess:
  return {
    ...state,
    menu_items: action.menu_items,
    menu_items_copy: action.menu_items,
    unmapped: false,
    isLoading: false
  }
case AppConstants.getAddonsItems:
  return {
    ...state,
    isLoading: true
  }
case AppConstants.getAddonsItemsSuccess:
  return {
    ...state,
    menu_items: action.addon_items,
    isLoading: false
  }

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

 case AppConstants.getUnmappedMenuItemsSuccess:
  return {
    ...state,
    unmapped: true,
    menu_items_copy: state.menu_items,
    menu_items: state.menu_items_copy.filter(data => {
      data.productList = data.productList.filter(
        id => id.brandProductSkuList[0].productSKUId.length === 36,
      );
      return data.productList.length !== 0;
    })
  }

现在，当我单击“取消映射过滤器”时，它会显示已过滤的数据，但在单击“所有产品”时，取消映射后它仍会显示未映射的数据，因为在“取消映射”功能中，状态（菜单项）会被更新。因此，如何在“所有产品”中显示原始数据。在我的UI中，我正在使用（this.props.menu_项），所以我只需要更新它。

---

我想做的是，当点击类别时，它应该显示所有产品和未映射的产品，以及类似的插件。

我认为您在根据未映射的项目请求更改

菜单项时犯了一个概念错误。将redux存储想象成某种旧的好SQL数据库并据此进行设计是非常有用的。您不会从数据库中删除不包含在
select
操作中的行。他们仍然住在一张桌子里，只是没有被选中

与
redux
应用程序的情况相同。让
getMenuItemsSuccess
成为
菜单项实际发生变异的唯一地方。然后执行以下操作之一：

在您的商店中引入
unmapped_items
字段，该字段将在
getUnmappedMenuItemsSuccess
操作时更新
相同，但在从后端加载数据后进行过滤。在这种情况下，
getUnappedMenuItemsAccess
将只切换项目的源，而不做任何额外的工作
在
组件中进行过滤

我从reducer中删除了未映射的功能，并将其放置在我的组件中，如下所示-

render() {
let count = 0;
return (
  <div className="table" >
    <div className="container" >
      <div className="show-grid row">
        <div className="col-xs-3 head1">Products</div>
        <div className="col-xs-3 head2">Variants</div>
        <div className="col-xs-3 head3">P.S ID</div>
        <div className="col-xs-3 head4">Updated</div>
      </div>
      {this.props.dataProp.length == 0 &&
        <div id="noproducts"> No Products Available</div>
      }
      {this.props.dataProp.map((data => {
        let dataNew = JSON.parse(JSON.stringify(data));
        if (this.props.unmapped === true) {
          dataNew.productList = dataNew.productList.filter(
            id => id.brandProductSkuList[0].productSKUId.length === 36
          );
          if (dataNew.productList.length > 0)
            return (<Category key={data.categoryName + uuidv4()} categoryData={dataNew} />);
        }
        else if (this.props.unmapped === false && data.productList.length > 0) {
          return (<Category key={data.categoryName + uuidv4()} categoryData={data} />);
        }
      }))
      }
    </div>
  </div >
 )
}

render（）{
让计数=0；
返回(
产品
变体
P.S.ID
更新
{this.props.dataProp.length==0&&
没有可用的产品
}
{this.props.dataProp.map（（数据=>{
让dataNew=JSON.parse（JSON.stringify（data））；
if（this.props.unmap==true）{
dataNew.productList=dataNew.productList.filter(
id=>id.brandProductSkuList[0]。productSKUId.length==36
);
如果（dataNew.productList.length>0）
返回（）；
}
else if（this.props.unmap==false&&data.productList.length>0）{
返回（）；
}
}))
}
)
}


我为unmap设置了一个标志，以在错误和正确时显示产品。
理想情况下，您应该将整个数据保存在redux store中，并在组件中过滤我们的内容，而不是自行更新store。是的，感谢workedGlad，您可以解决此问题，您可以为您的问题添加答案，以供读者参考，了解您是如何解决的