Redux：有什么聪明的方法可以避免为辅助文件导入商店的反模式吗？

Question

我目前正在构建一个 React Native 应用程序，使用状态管理 Redux 和 Firebase 云消息传递进行实时通信。

在 Android you are required 的后台使用 FCM 创建名为 bgMessaging.js 的文件。

// @flow
import firebase from 'react-native-firebase';
// Optional flow type
import type { RemoteMessage } from 'react-native-firebase';

export default async (message: RemoteMessage) => {
    // handle your message

    return Promise.resolve();
}

我的问题是我需要在这里发送一个动作。我为此找到的唯一解决方案是导入我的商店并调用 store.dispatch()。有人告诉我这是一种反模式，被认为是不好的做法。我还能做什么不是反模式？

编辑： 马克·埃里克森本人非常友善 gave his opinion on this topic。谢谢马克！

Answer 1

我看到的是您需要提供一个函数，该函数具有单个 arg，类型为 RemoteMessage，其中 returns 是一个承诺，并且您需要将该函数提供给 registerHeadlessTask（由于某种原因包装在另一个函数中..）

那么，如果您的 bgMessaging 文件看起来像这样呢……

// @flow
import firebase from 'react-native-firebase';
// Optional flow type
import type { RemoteMessage } from 'react-native-firebase';

export default store => {
  return async (message: RemoteMessage) => {
    // handle your message
    store.dispatch();
    return Promise.resolve();
  }
}

在你的索引中你做到了..

import bgMessaging from './src/bgMessaging';

const store = redux.createStore();

const bgMessagingFn = bgMessaging(store);

// Current main application
AppRegistry.registerComponent('ReactNativeFirebaseDemo', () => bootstrap);
// New task registration
AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => bgMessagingFn);

Answer 2

我在写申请的时候也遇到过同样的情况。我对我的 React Native 应用程序的方法是创建 React Components，但是在 React Components 之外处理我的大量数据 fetching/handling - 因为我不知道我是否会一直使用 React，但是想为我的其他 Type/JavaScript 项目创建可重复使用的模块。例如，我创建了一些处理各种 API 的帮助文件，但是当我将 Redux 集成到我的项目中时 - 我遇到了同样的问题。我如何在不重新添加到您的商店的情况下发货（正如我所见，这可以被视为反模式）。

读了几篇文章，没有真正的地方表明这种方法是 'Anti Pattern'。很多时候，商店是在 React 上下文中导入的（不需要）——这就是反模式。在您的用例中，我真的不明白这怎么可能是反模式，当我做同样的事情时，我当然得出了这个结论。在我看来，应用程序的 'Common' 部分应该由应用程序的许多其他部分使用。

Redux：有什么聪明的方法可以避免为辅助文件导入商店的反模式吗？

Redux: Is there any smart way to avoid the antipattern of importing store for helper files?

react-native

redux

react-android

react-redux

firebase-cloud-messaging