Как лучше создавать и работать с инстансом, в котором данные из API?

Question

[cannabioid1337]

У меня есть данные от вебсокет сервера, которые я получаю по API.
Мне нужно передать их в инстанс new Echo, и после чего работать с ним по всему проекту.

По официальной документации в инстанс сразу передаются данные, и он прокидывается в window

window.Echo=new Echo({})

Но у меня данные то не сразу известны.
Единственное что мне пришло в голову это создать стейт websocket и прокидывать его в index.js провайдером.
Как лучше это реализовать, и про что читать?)

const [websocket, setWebsocket] = React.useState('connecting');

    useEffect(() => {
        api.get('v1/websockets/connect').then(res => {
            let data = res.data;
            let Pusher = new Echo({
                            broadcaster: 'pusher',
                            key: data.APP_KEY,
                            wsHost: settings.backend_url.replace(/:\d+/, "").replace(/(^\w+:|^)\/\//, ''),
                            wsPort: data.APP_PORT,
                            forceTLS: false,
                            disableStats: true,
                            authorizer: channel => {
                                return {
                                    authorize: (socketId, callback) => {
                                        api.post(settings.backend_url + '/v1/broadcasting/auth', {
                                            socket_id: socketId,
                                            channel_name: channel.name
                                        })
                                            .then((response) => {
                                                callback(false, response.data);
                                            })
                                            .catch((error) => {
                                                callback(true, error);
                                            });
                                    },
                                };
                            },
                        });

            setWebsocket(
                Pusher
            )
        })

    }, []);

Answer 1

[Yaroslav Lyzlov]

Читать про стейт-менеджеры в React. Текущий код - адский антипаттерн.