10

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

  • 使用setState和“本地”reducer（我使用recompose.withReducer，它只是 React 的 native 的语法糖 setState）来管理它的状态。在您需要更改页面其他部分中的组件状态之前，它看起来很容易且可重用（关闭弹出窗口以防万一）。而且你不能只调用一些 redux 操作来改变状态。

  • 将组件的状态保存在 Redux 存储中。使用这种方法，我们可以closePopupAction({ id })在组件树的任何位置调用以更改它的状态。`但是我们需要以某种方式将它的减速器（我想保留在弹出的文件夹中）放在根减速器中，当组件被挂载并删除它时组件已卸载。另外，我们可以在页面中有多个弹出窗口，每个弹出窗口都有自己的状态。

有没有人遇到过类似的问题？

4

2 回答 2

1

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

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

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

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

于 2016-10-14T17:17:54.660 回答
0

您可以将每个组件的状态挂载到它自己的存储片中。

因此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)
      }
      // ...
   }
于 2017-08-22T11:57:01.180 回答