React-Native 中的组件化，使用 redux 工具包在 npm 中发布

Question

我目前正在使用 React-Native 进行一些项目，它们的设计彼此相似。然后就有机会使我们的自定义组件可重用。

我们有一个带有可触摸的自定义组件，单击时会显示带有项目列表的模式。我需要共享状态并从可触摸到模式分派操作，反之亦然，因此我们为此使用 redux 工具包。问题是，当我们将一个操作分派到模态时，我们使用该自定义组件的其他地方的所有其他模态也会收到此操作。 我们尝试使用 ContextAPI 将其包装在提供程序中，但由于它的工作方式，通过来自可触摸的分派操作在模态中进行的每个状态更改都会导致它们重新渲染，即使可触摸不依赖于模式中的状态。

现在我们代码的简化：

<Provider> // Here is the store logic from redux toolkit
  <CustomSelector>
    <CustomTouchable />
    <CustomModal />
    // Others custom components
  </CustomSelector>
</Provider>

内部

CustomTouchable

const CustomTouchable = (props: Props) => {
  const dispatch = useCustomSelectorDispatch()
  function onPress() {
    dispatch(changeModal())
  }

  return <TouchableOpacity onPress={onPress}>
    // boring stuff
  </TouchableOpacity>
}

我们的自定义模式：

const CustomModal = () => {
  const illchange = useCustomSelector()
  return <Modal>
    // We use illchange here
  </Modal>
}

我应该如何重写这段代码，以便可以在 npm 中分发，并只需将

<CustomSelector />

放在代码中任何你想要的位置，而无需在项目的 redux 中配置任何内容，就可以轻松实现项目中的多个代码？当然，CustomSelectorA 不能影响 CustomSelectorB。

Answer 1

使用区分其实例的 prop 调用模态。因此，重用它的组件不仅仅渲染

<CustomModal data={ ... } />

，而是渲染类似

<CustomModal data={ ... } slug="name_of_current_screen" />

的东西。对于模态的每个实例，使用不同的字符串作为

slug

。

slug

只是一个建议，您可能有更好的名字。这就是一些可重用模态组件的构建方式，例如 https://facelessui.com/docs/modal/api#modal。

支持模态的 redux 内容需要考虑模态的这些 slugs/实例并相应地分离它们的状态。例如，每个 slug 都可以是对象中的一个键，该值可以是保存一个模态实例的特定状态的对象。

示例：

modals: {
    screen1: {
        isOpen: true
    },
    screen2: {
        isOpen: false
    }
}

关于在 npm 上发布：如果遇到问题，最好单独发布一个问题。一般来说，依赖 redux 来进行可重用模态库的状态管理并不是一个好主意。您必须依赖消费者应用程序的 redux 提供者。我认为 Context API 是解决这个问题的方法。您提到尝试这样做会导致重新渲染出现问题。无论是性能方面还是用户体验方面，这“实际上”是一个真正的问题吗？我想大多数时候这些模态中只有一个是可见的（因为这就是模态的工作方式）。