How do I get access to my jwt first and then connect to socketiomiddleware?

[akshaykumar771]

console.ignoredYellowBox = ["Remote debugger"];
import { YellowBox } from "react-native";
YellowBox.ignoreWarnings([
  "Unrecognized WebSocket connection option(s) `agent`, `perMessageDeflate`, `pfx`, `key`, `passphrase`, `cert`, `ca`, `ciphers`, `rejectUnauthorized`. Did you mean to put these under `headers`?"
]);
import React, { useState } from "react";
import { StyleSheet} from "react-native";
import * as Font from "expo-font";
import { AppLoading } from "expo";
import AppNavigation from "./navigation/AppNavigator";
import { createStore, applyMiddleware, combineReducers } from "redux";
import { Provider } from "react-redux";
import { setNavigator } from './navigationRef';
import ReduxThunk from 'redux-thunk';
import createSocketIoMiddleware from "redux-socket.io";
import {userReducer} from "./reducers/userReducer";
import {chatReducer} from "./reducers/chatReducer";

const store = createStore(combineReducers({userReducer, chatReducer}), applyMiddleware(ReduxThunk, socketIoMiddleware));

 let currentValue = store.getState().userReducer.token;
 const socket = io.connect('http://81.89.193.99:3001/chat', {
     query: {token: token} })
console.log("CuurentValue", currentValue);
const socketIoMiddleware = createSocketIoMiddleware(socket, "chat:");
const fetchFont = () => {
  return Font.loadAsync({ 
    "raleway-bold": require("./assets/fonts/Raleway-Bold.ttf"),
    ralewayBold: require("./assets/fonts/Raleway-Bold.ttf"),
    "roboto-regular": require("./assets/fonts/Roboto-Regular.ttf"),
    robotoRegular: require("./assets/fonts/Roboto-Regular.ttf"),
    Roboto_medium: require("./assets/fonts/Roboto-Regular.ttf"),
  });
};

export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false);
  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFont}
        onFinish={() => setFontLoaded(true)}
        onError={(err) => {
          console.log(err);
        }}
      />
    );
  }
  return (
    <Provider store={store}>
      <AppNavigation ref = {(navigator) => {setNavigator(navigator)}} />
    </Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});