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

Question

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

• 使用 setState 和“本地”reducer(我使用 recompose.withReducer 这只是 React 原生 setState 的语法糖)来管理其状态。它看起来很简单且可重用，直到您需要更改页面其他部分中的组件状态(在这种情况下关闭弹出窗口)。而且你不能只调用一些 redux 操作来改变状态。

• 将组件的状态保存在 Redux 存储中。通过这种方法，我们可以在组件树的任何位置调用 closePopupAction({ id }) 来更改其状态。但是我们需要以某种方式放置其 reducer (我想将其保留在弹出窗口的文件夹中)当组件安装时添加到根 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 :)