Question

在我的React / Redux应用程序中，我经常面临实现应该在整个应用程序中使用的状态组件的问题。我们以简单的弹出组件为例，打开/关闭状态，可以在任何页面中重复使用。我找到了两种可能的方法：

使用setState和“local”reducer（我使用recompose.withReducer这只是React的原生setState的语法糖）来管理其状态。它看起来很容易并且可以重复使用，直到您需要在页面的其他部分更改组件的状态（在外壳中关闭弹出窗口）。而且你不能只是调用一些redux动作来改变状态。
将组件的状态保留在Redux存储中。使用这种方法，我们可以在组件树的任何位置调用closePopupAction({ id })来改变它的状态。但是当组件是组件时，我们需要以某种方式将它的reducer（我想保留在popup的文件夹中）放到root reducer中。卸载组件时挂载并删除它。另外，我们可以在页面中添加多个弹出窗口，每个弹出窗口都有自己的状态。

有没有人面临类似的问题？

Answer 1

我认为你应该在redux中保持组件的状态。您可以为此组件创建reducer并以这种方式使用combineReducers函数：

 public static void CreateCurrentOrderStatus()
    {
        var Status = new List<CurrentEquipmentOrderStatu>();
        using (FFAELDB db = new FFAELDB())
        {
            db.Configuration.AutoDetectChangesEnabled = false;
            var EquipAssignments = db.OrderEquipAssignments;
            foreach(OrderEquipAssignment assign in EquipAssignments)
            {

                 db.CurrentEquipmentOrderStatus.Add(new CurrentEquipmentOrderStatu()
                {
                    EquipmentId = assign.EquipmentId,
                    OrderEquipAssignmentId = assign.OrderEquipAssignmentId,



                });

            }
            db.SaveChanges();

            db.Dispose();
        }

    }

然后当你调用closePopupAction（“id1”）时，reducer可以检查id并改变状态的正确部分。

PS：我应该以更好的方式提供ID：）

Answer 2

您可以将每个组件的状态挂载到它自己的商店切片。

因此，使用该挂载路径调用您的closePopupAction操作：

closePopupAction({ mountPath: 'popups.popup1' })

并且您只需要一个reducer来处理所有closePopupAction个动作，这些动作可以在启动时注册一次：

 (state, { type, mountPath }) => {
      if (type === 'CLOSE_POPUP_ACTION') {
         // manipulate with the slice at `mountPath`, e.g.
         return _.set(_.cloneDeep(state), `${mountPath}.isOpen`, false)
      }
      // ...
   }

可重复使用的react-redux容器组件

2 个答案: