带有 React Redux 的通用组件

Question

我对 redux 中的全局状态和可重用组件的概念有些挣扎。

假设我有一个组件是一个文件选择器，我想在我的应用程序状态内的多个地方使用它。创建 action/reducer 会导致很多膨胀，因为我必须处理带有动态后缀的状态和其他奇怪的东西，这些东西并没有真正让我觉得这是一种明智的处理方式。

对这些事情的普遍共识是什么？我只能看到两种解决方案：

• 使文件选择器组件具有本地状态 ( this.setState/this.getState)

• 使文件选择器成为全局状态的一部分，但在它自己独特的减速器中，一旦组件的操作完成，我就可以从中读取？

任何想法/最佳实践？谢谢。

更新：为了澄清我所描述的文件选择器不是一个纯粹在客户端工作的简单组件，而是必须从服务器获取数据，提供分页以及过滤等。这就是为什么我也想重用大多数客户端/服务器交互。显示这个组件的视图当然是愚蠢的，只显示来自状态的值——但是我如何在应用程序的多个地方重用动作/reducer？

Answer 1

让您的减速器处理组件状态的多个实例。当 FileBrowser 组件出现在应用程序中时，只需为它的每个实例定义一些“唯一”ID，并将当前状态包装在一个对象中，将此 uniqueIds 作为键，将旧的复杂状态作为值。

这是我多次使用过的技术。如果您的所有文件浏览器在编译时都是已知的，您甚至可以在运行应用程序之前设置初始状态。如果您需要支持“动态”实例，只需创建一个 Action 来初始化给定 id 的状态。

您没有提供任何代码，但这里有一个可重用 Todo 减速器的人为示例：

function todos(state={}, action){
  switch(action.type){
    case 'ADD_TODO':
      const id = action.todoListId
      return {
         ...state,
         [id]: {
            ...state[id],
            todos: [ ...state[id].todos, action.payload ]
         }
      }
      // ... 
  }
}