Question

我正在学习Redux的概念。根据我的理解，减速器不应该改变状态，它们会返回一个应用了突变的新状态。他们也不应该（或者甚至不能）发出其他行动。

鉴于这些限制，您可以使用动作创建者，中间件或React组件（如果使用Redux和React）来调用业务逻辑。所以，我想要做的就是使用Firebase，我所遇到的墙，以及我的问题如下：

您应该在哪里创建实例（即初始化Firebase）？同样，Firebase的未初始化应该在哪里？通常情况下，我希望这些服务属于您所称的某种服务，但我不确定您将在何处拨打该服务。
你应该在哪里听取变化？ Firebase在引用上提供 .on 以允许您对更改做出反应（即child_added，child_removed） - 这些.on处理程序应该放在哪里？我当然认为，当其中一个事件发生时，需要与有关孩子一起派遣一个动作来更新状态，但我不能在减速器中这样做，我不想在组件上执行此操作，并且动作创建者看起来似乎是一个奇怪的地方（当我考虑它时，它甚至会如何工作？）！

解决方案

最后我最终关注了@ampersand的建议。我为Firebase应用程序的所有监听器制作了一个模块。我在Firebase模块中导入了一个dispatcher.js文件，该文件由调度程序函数组成，如下所示：

import store from '../store';
import * as actions from './index';

export function addUserMessage(text) {
    store.dispatch(actions.addUserMessage(text));
}

export function addResponseMessage(messageObj) {
    store.dispatch(actions.addResponseMessage(messageObj));
}

我不理解的是如何从外部模块调度操作。现在我明确了这些概念。

Answer 1

我对Firebase不熟悉，但我认为中间件很可能就是答案。

您可以编写一个可以访问Firebase实例的简单中间件，并将这些消息发送到Redux商店。

// firebase-middleware.js
export default function createFireBaseMiddleware (firebaseInstance) {
  return store => dispatch => {
    fireBaseinstance.on(message => {
      dispatch({
        type: 'FIREBASE_MESSAGE',
        payload: message,
      })
    })

    return action => {
      if (action.type === 'TALK_BACK_TO_FIREBASE' {
        firebaseInstance.postMessage(action)
      }

      // Let the action continue down the path of middleware to the store
      return dispatch(action)
    }
  }
}

// createStore.js
export default createStore(
  reducer,
  applyMiddleware(createFireBaseMiddleware(myfirebaseInstance)
)

Answer 2

要了解@ chautelly的响应，通常react / redux中的服务只是模块 - 在独立模块中创建firebase实例，从中导出适当的对象，并在需要时导入。

<强> database.js

import firebase from 'firebase';

firebase.initializeApp({
  apiKey: 'api key',
  authDomain: 'db_name.firebaseio.com',
  databaseURL: 'https://db_name.firebaseio.com/'
});

const database = firebase.database();

export default database;

React redux - 如何处理事件？

解决方案

2 个答案: