When switching expo from develop mode to production my RSAA calls become invalid, why?

Question

Background

I am using expo to view my react native app on my android phone. I have implemented a node server that the app retrieves data from. To retrieve data I am using the library redux-api-middleware and storing it in the redux store.

I have used this setup before with regular react apps but not react-native.

Problem

When I switch the app from develop to production mode in expo my calls to the server no longer work. I get the following response instead of the data like in dev mode.

Object {
   "error": true,
   "payload": [InvalidRSAA: Invalid RSAA],
   "type": Symbol {
     "_k": "Symbol(REQUEST_TEST_REQ)_l.b74uhq9lvf",
   },
}

My Current Call

import { RSAA } from 'redux-api-middleware';
import { NODE_API_URL } from 'react-native-dotenv';


export const REQUEST_TEST_REQ = Symbol('REQUEST_TEST_REQ');
export const REQUEST_TEST_SUC = Symbol('REQUEST_TEST_SUC');
export const REQUEST_TEST_FAIL = Symbol('REQUEST_TEST_FAIL');

const requestSomeDataFromTheServer = () => {
    return {
        [RSAA]: {
            endpoint: `${NODE_API_URL}/api/test`,
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            types: [
                REQUEST_TEST_REQ,
                REQUEST_TEST_SUC,
                REQUEST_TEST_FAIL
            ]
        }
    }
};

export { requestSomeDataFromTheServer };

Question

So I follow the rules of the RSAA request but I see this failure as soon as a request is made. It is definitely not my node server since it works in dev mode. Can someone shed some light on this issue for me?

Answer 1

Symbols create invalid requests in production mode

I thought that maybe it was a problem with fetch in production so I added a polyfill first but this didn't help. This gave me the idea to take everything back to basics and so i turned the symbols into strings.

export const REQUEST_TEST_REQ = 'REQUEST_TEST_REQ';
export const REQUEST_TEST_SUC = 'REQUEST_TEST_SUC';
export const REQUEST_TEST_FAIL = 'REQUEST_TEST_FAIL';

By changing these back to plain strings the request is valid and so my problem is solved.

I am still unaware as to why the symbols break in production mode because they work fine in the develop. Also I am using babel polyfill to make them "safe" to use.

If anyone could clear up the rest of this mystery that would be great.