@vovashaplin

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

Раньше все было вот так и работало
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;
  • Вопрос задан
  • 27 просмотров
Пригласить эксперта
Ответы на вопрос 1
ktim8168
@ktim8168
Frontend Developer
Ну, по идее message и messages должны хранится в пропсах, если нет, попробуйте передать парметры напрямую в функцию.
const setMessagesHandler = (messages) => {
  dispatch(setMessages(messages));
}

const addMessageHandler = (message) => {
  dispatch(addMessage(message));
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 сент. 2020, в 12:04
1000 руб./в час
19 сент. 2020, в 11:59
20000 руб./за проект
19 сент. 2020, в 11:26
17500 руб./за проект