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

Question

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

• 使用setState和"本地"reducer(我使用recompose.withReducer,它只是React本机的语法糖 setState)来管理它的状态.它看起来很容易并且可以重复使用,直到您需要在页面的其他部分更改组件的状态(在外壳中关闭弹出窗口).而且你不能只是调用一些redux动作来改变状态.

• 将组件的状态保留在Redux存储中.使用这种方法,我们可以closePopupAction({ id })在组件树的任何地方调用以改变它的状态.但是我们需要以某种方式将其reducer(我想保留在弹出窗口的文件夹中)放到根减速器上,当组件被挂载时删除它.该组件已卸载.另外,我们可以在页面中添加多个弹出窗口,每个弹出窗口都有自己的状态.

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

Answer 1

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

rootReducer = combineReducers({
    moduleA: combineReducers({
      popupA: popupReducer("id1"),
      popupB: popupReducer("id2")
    }),
    moduleB: combineReducers({
      popupA: popupReducer("id3")
    })
  })
});

然后当你调用 closePopupAction("id1") 时，reducer 可以检查 id 并更改状态的适当部分。

PS：应该以更好的方式提供 ID :)