How do I store a non serialisable variable in a react - redux state without breaking it if I really must (like saving a device connection via WebAPIs)

Question

I keep getting the statement "do not save non-serializable variables in your state" in almost every google search result - But what happens when I really should?

Progect: I am building an app for deviceS connected via SerialPort (using SerialPort WebAPI). I wish to save the connection instance since I use it throughout all my application and I am honestly tired of passing the instance down and up whenever I need it without react knowing to re-render data and display new data - which is important for me too.

Steps that I have done:

• It was easy to ignore the non-serializable error using serializableCheck: false:

  export default configureStore({

    reducer: {
        serialport: SerialPortDevicesReducer,
        bluetooth: BluetoothDevicesReducer,
    },
  
    middleware: getDefaultMiddleware => 
        getDefaultMiddleware({
            thunk,
            serializableCheck: false
        }).concat(logger),})
  

But now I am facing the big problem:

• Whenever I create a connection I get the object that handles that specific SerialPort device object that is connected.

  deviceReducer: { id: 1, instance: SerialPort{[attr and methods here]}, ... }

• Whenever I use methods like open(), write() or read() it changes the main connection instance object and breaks with that known error:

Error: Invariant failed: A state mutation was detected between dispatches, in the path 'serialport.0.instance.readable'. This may cause incorrect behavior

• Since It's not serializable I cannot clone it (which I think is the reason?) and then re-assign it + I think cloning a connection instance will cause other device-connection issues.

I ended up writing the connect method case directly in the state with a "promise" new variable to handle the result.

// click in a react component 
const handleConnect = () => {
    try {
        if ( dispatch(connect(device)) ) {
            setActiveStep((prevActiveStep) => prevActiveStep + 1)
            return true
        }
    } 
    catch (e) {
        console.error("Device cannot connect: ", e)
    }
}

// In a file that trigges dispatch() to the reduces
const connect = (deviceId) => async (dispatch, getState) => {
    try {
        dispatch({
            type: "serialport/connect",
            payload: deviceId
        })
    } catch(e) {
        console.log(e)
    }
}

// in reducer
const SerialPortDevicesReducer = (state = initialState, action) => {

    switch (action.type) {

        case 'serialport/connect':
            try {
                return {
                    ...state,
                    [action.payload]: {
                        ...state[action.payload],
                        promise: state[action.payload].instance.open({baudRate: 115200})
                    }
                }
            } catch (e) {
                console.error("Cannot run promise inside reducer: ", e)
            }

This is the only workaround I currently found. And this basically forces me to handle (maybe some complex) things in the reducer instead of just passing data to it. I tried applying the same for the write method:

// click in component
const handleExecute = (command) => {
    try {

        dispatch(writeToSP(device1.device, command))
    } catch (e) {
        console.log(e)
    }
}


// In file which trigges the dispatch()
const writeToSP = (deviceId, command = "Z !\n") => async (dispatch) => {
    let startTime = new Date().getTime()
    let encoder = new TextEncoder()
    try {
        dispatch({
            type: "serialport/write", 
            payload: {
                id: deviceId,
                // cmd: encoder.encode(command), 
                // startTime
            }
        })
    } catch (e) {
        console.error("error writing: ", e)
    }
}


// in reducer 
...

    case 'serialport/write':
        try {
            const writer = state[action.payload.id].instance.writable.getWriter()
        } catch (e) {
            console.error("Cannot run promise inside reducer: ", e)
        }

and again, get the error of "Error: Invariant failed: A state mutation was detected..." which I am guessing a result of it changing other attributes in the SerialPort instance.

Having packages like redux-promise-middleware are awesome, but it seems like an object in my state is the one responsible for its own promise and changes.

How do I handle this specific situation?

Answer 1

Simple: don't put it into Redux. Redux is made for data, not for arbirtary external libraries/dependency injection.

If that value will never change after initialization and you do the initialization outside of React, just put it into a global variable that is exported.

If that value will change over time, you should use the Dependency Injection mechanism of React for it: Context. This is really what context is made for - not sharing state values, but global dependencies.