Question

我遇到的问题是，我的某个组件中调用的操作会导致reducer两次处理事件两次，一个事件直接在另一个事件之后，具有与之前完全相同的有效负载。

以下是控制台的输出： https://i.stack.imgur.com/MWmft.png

以下是该操作所遵循的代码：

componentWillMount() {
  console.log('component is mounting')
  this.props.secureSocket.on('RECEIVE_CHAT', (data) => {
    console.log('got a socket message')
    this.props.receiveChat(data)
  })
}

^这会从api捕获套接字的动作并相应地调度动作，只触发一次

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({
    sendChat,
    receiveChat
  }, dispatch)
}

^这就是道具被绑定到派遣的方式

export function receiveChat(object) {
  console.log('action called')
  return {
    type: RECEIVE_CHAT,
    payload: object
  }
}

^这是被派遣的行动

export default function reducer(state = initialState, { type, payload }) {
  switch (type) {
    ...
    case RECEIVE_CHAT:
      console.log('RECEIVED CHAT')
      return update(state, {
        messages: {
          $push: [payload]
        }
      })
    ...
  }
}

^这就是减少动作的方式，但它被调用了两次

修改以下是在componentWillUnmount

上触发的代码

componentWillUnmount() {
  console.log('unmounting')
  this.props.secureSocket.off('RECEIVE_CHAT')
}

Answer 1

错误是我在redux中间件中的错误行为。

我在中间件中的一个对象上使用forEach，如果中间件的参数不满足，我会调用return next(action)，这将有效地创建一个在每个forEach递归上调用的新动作

感谢所有提供答案的人。

操作由套接字调用一次，但在reducer中处理两次

1 个答案: