reactjs - React + Redux 在模块/域之间共享操作

Question

假设您有一个包含 2 个模块的应用程序(以鸭子的方式分割)。
一种是急切加载的 Notification 模块，用于在成功或失败时显示通知。另一个是Calculation，它进行一些计算

- Notification
    - components
    - actions
    - ...
    - index.js
- Calculation
    - components
    - actions
    - ...
    - index.js

在很多架构文章中，他们建议您应该通过 index.js 文件导出每个模块的操作创建者，该文件充当模块的公共(public) API。例如，如果我想公开我的 Notification 模块的 success 操作创建者，那么我会从 index.js 导出它该模块中的文件。现在我的其他模块可以导入这些 Action 创建者。

我喜欢你的模块中面向公众的 API 的想法。我发现这种工作方式的麻烦在于你将模块与 redux 库紧密耦合。因为如果我切换到新的 Notification 模块，那么该模块也必须公开与 redux 相关的操作创建者。

我的担忧是否有效？如果是这样，您能建议一个更好的(但仍然惯用的)解决方案吗？

我在Angular中要做的事情如下:我将从 Notification 模块公开一个单例服务，充当该模块面向公众的 API。如果任何其他模块(例如Calculation)需要使用Notification模块中的功能，它们可以使用依赖项注入(inject)来注入(inject)服务并调用notificationService.addNotification('消息')。在该单例服务中，我将调用我的 store 上的 dispatch 方法。

Calculation 模块不需要知道 NotificationModule 是否使用存储。只要面向公众的单例服务仍然公开 addNotification 方法，我就可以轻松切换 Notification 模块。通过反转依赖关系，我不需要更改使用 Notification 模块的每个模块。

感谢您的建议!

Answer 1

使用connect函数怎么样？这样你的组件

1. 完全无需 Redux 即可成为用户
2. dispatch 和其他类似的 redux 工作人员将隐藏在 connect 后面

这是示例

export const MyComponent = ({ alertState, notificationsArray, SetAlert, AddNotification }) => {
  return <div>
    Alert state: {alertState.toString()}
    <button onClick={() => SetAlert(!alertState)}>Toggle alert</button>
    <div>
      Notifications: {notificationsArray.map(n => `${n}, `)}
      <button onClick={() => AddNotification()}>Add notification</button>
    </div>
  </div>
}

export default connect(state => ({ alertState: state.alert.alertState, notificationsArray: state.notifications.notificationsArray }), {...Alerts.actionCreators, ...notification.actionsCreators})(MyComponent)

请注意，MyComponent 内部没有dispatch。所以你可以使用 MyComponent 而无需 Redux

// Another file
import { MyComponent } from './MyComponent.js'

export const App = () => {
  return <MyComponent alertState={true} SetAlert={(alert) => console.log(alert)} notificationsArray={[ 'notification1', 'notification2' ]} AddNotification={() => {}} />
}

或者，如果您想将其用作已连接的，请执行

// Some third file
import MyComponent from './MyComponent.js'  // Note, that now it is default import

export const AnotherComponent = () => {
  return <MyComponent />

现在请注意，我没有向 MyComponent 提供任何 Prop ，它们将由 connect 提供。

您还可以将对 connect 的调用移至其他文件。因此 MyComponent 将完全独立于 Redux。

您也没有义务将 MyCompoent 完全连接到 Redux。您可以部分连接它

export default connect (state => ({ alertState: state.alert.alertState }), Alerts.actionCreators)(MyComponent)

现在，您应该在调用 MyComponent 时提供 notifications 和 AddNotification，因为它们不是从 Redux 获取的。