正在分派类型和有效负载而不调用它

Question

我目前正在开发具有聊天功能的 react-native 应用程序。我正在使用 redux 来存储我的状态。所以在按下发送按钮发送消息后，调用一个动作将消息发送到 firebase 并在之后显示在屏幕上。

我目前的问题是，当我调用的动作调度正确的 type/payload 时，另一个 type/payload 也在被调度，它没有在被调用的动作中被调度。显然以某种方式调用了另一个包含 type/payload.

的动作

未被调用的动作代码如下：

const getChatData = (chatIDs, userName, uid) => async dispatch => {
  console.log('hasdhkhwerljlkbgkanndhadndngknnjnjsnfjskdnfjsuvhshdifhuishiduhfuishdkfnkjsndf')
  const chatData = []
  for (const key of chatIDs) {

     [...]

        // get message
        firebase.database().ref('messages/' + key)
          .orderByChild('timestamp').limitToLast(1)
          .on('child_added', snapshot => {
            const { text, timestamp, user } = snapshot.val();
            const { name } = user;

            chatData.push({ key, members: displayNameArray, text, timestamp, name })
            dispatch({
              type: GET_CHAT_DATA,
              payload: chatData
            })
          })
      })
  }
}

如我所说，尽管未调用此操作，但正在调度 GET_CHAT_DATA 类型。此外，console.log 没有显示长测试消息，这应该意味着没有调用此操作，对吗？

什么会导致这种奇怪的行为？

非常感谢！

Answer 1

所以问题是即使你没有执行函数但是你在 firebase 上注册了一个事件

 .on('child_added', snapshot => { })

现在，只要触发此 child_added 事件，就会执行处理程序。这就是为什么您的调度程序是运行因为它在事件处理程序中。

 firebase.database().ref('messages/' + key)
          .orderByChild('timestamp').limitToLast(1)
          .on('child_added', snapshot => {
            // this is the event handler which is executing
            // when the "child_added" event is triggered
            const { text, timestamp, user } = snapshot.val();
            const { name } = user;

            chatData.push({ key, members: displayNameArray, text, timestamp, name })
            dispatch({
              type: GET_CHAT_DATA,
              payload: chatData
            })
          })
      })

正在分派类型和有效负载而不调用它

Type and payload are being dispatched without calling it

react-native

redux

react-native-gifted-chat