Как передать callback в инстанс?

Question

[vovashaplin]

Раньше все было вот так и работало

componentDidMount() {
    WebSocketInstance.addCallbacks(this.props.setMessages.bind(this), this.props.addMessage.bind(this));
  }
 ... 
 ...
const mapDispatchToProps = dispatch => {
  return {
    addMessage: message => dispatch(messagesActions.addMessage(message)),
    setMessages: messages => dispatch(messagesActions.setMessages(messages))
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

Но я решил переделать классовый компонент в функциональный

const dispatch = useDispatch();

  const setMessagesHandler = () => {
    dispatch(setMessages());
  }

  const addMessageHandler = () => {
    dispatch(addMessage());
  }

  useEffect(() => {
    dispatch(authCheckState());
    WebSocketInstance.addCallbacks(setMessagesHandler, addMessageHandler);
  }, []);

Но дело в том, что эти две функции принимают по 1 входному данному и я не знаю как это реализовать
Вот экшены

export const addMessage = message => {
  return {
    type: actionTypes.ADD_MESSAGE,
    message: message
  };
};

export const setMessages = messages => {
  return {
    type: actionTypes.SET_MESSAGES,
    messages: messages
  };
};

Вот редюсер

const addMessage = (state, action) => {
  return updateObject(...state, {
    messages: [...state.messages, action.message]
  });
};

const setMessages = (state, action) => {
  return updateObject(state, {
    messages: action.messages.reverse()
  });
};

Вот WebSocketInstance, в который добавляются колбеки

class WebSocketService {
  static instance = null;
  callbacks = {};

  static getInstance() {
    if (!WebSocketService.instance) {
      WebSocketService.instance = new WebSocketService();
    }
    return WebSocketService.instance;
  }

  constructor() {
    this.socketRef = null;
  }

  connect(chatUrl) {
    const path = `ws://127.0.0.1:8000/ws/chat/${chatUrl}/`;
    this.socketRef = new WebSocket(path);
    this.socketRef.onopen = () => {
      console.log('WebSocket open');
    };
    this.socketRef.onmessage = e => {
      this.socketNewMessage(e.data);
    };
    this.socketRef.onerror = e => {
      console.log(e.message);
    };
    this.socketRef.onclose = () => {
      console.log("WebSocket closed let's reopen");
      // this.connect(chatUrl);
    };
  }

  disconnect() {
    this.socketRef.close();
  }

  socketNewMessage(data) {
    const parsedData = JSON.parse(data);
    const command = parsedData.command;
    if (Object.keys(this.callbacks).length === 0) {
      return;
    }
    if (command === 'messages') {
      this.callbacks[command](parsedData.messages);
    }
    if (command === 'new_message') {
      this.callbacks[command](parsedData.message);
    }
  }

  fetchMessages(username, chatId) {
    this.sendMessage({ 
      command: 'fetch_messages', 
      username: username, 
      chatId: chatId 
    });
  }

  newChatMessage(message) {
    this.sendMessage({ 
      command: 'new_message', 
      from: message.from, 
      message: message.content, 
      chatId: message.chatId 
    }); 
  }

  addCallbacks(messagesCallback, newMessageCallback) {
    this.callbacks['messages'] = messagesCallback;
    this.callbacks['new_message'] = newMessageCallback;
  }

  sendMessage(data) {
    try {
      this.socketRef.send(JSON.stringify({ ...data }));
    }
    catch(err) {
      console.log(err.message);
    }  
  }

  state() {
    return this.socketRef.readyState;
  }

}

const WebSocketInstance = WebSocketService.getInstance();

export default WebSocketInstance;

Answer 1

[Timur Kostenko]

Ну, по идее message и messages должны хранится в пропсах, если нет, попробуйте передать парметры напрямую в функцию.

const setMessagesHandler = (messages) => {
  dispatch(setMessages(messages));
}

const addMessageHandler = (message) => {
  dispatch(addMessage(message));
}

Comments

[Timur Kostenko]

можно еще вернуть

const setMessagesHandler = (messages) => {
  return dispatch(setMessages(messages));
}

const addMessageHandler = (message) => {
  return dispatch(addMessage(message));
}

поэкспериментируйте