Issue when code is minified

[sloanwolf]

I've been struggling with an issue for a week and have finally narrowed it down.

Everything works fine in when I'm debugging in React-Native normally but was failing with no error when I tried to build and run via offline bundle. Eventually I tried running via packager with minify=true and was able to reproduce the issue. I put in a ton of console debug between my Actions and Store and it never reaches my Store functions.

Index

import UserStore from './stores/UserStore';
import UserActions from './actions/UserActions';

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ...
    };
    Object.assign(this.state, UserStore.getState());
  }

  componentWillMount(){
    UserStore.listen(this.onChange.bind(this));
  }

  componentWillUnmount(){
    UserStore.unlisten(this.onChange.bind(this));
  }

  onChange(state){
   ...
    this.setState(Object.assign(this.state, UserStore.getState()));
  }
}

Store

onSaveUserSuccess(payload) {
    this.user = payload;
    ...
  }

Action

constructor() {
    this.generateActions(
      ...
      'saveUserSuccess',
     ...
    );
  }
saveUser(data) {
    return (dispatch) => {
      this.saveUserSuccess(data);
    }
  }

this.saveUserSuccess never gets fired. So is there potentially an issue with the dispatcher when minified?

That example is from React-Native 0.14 but still works in React-Native 0.28 EXCEPT when minified.

I wanted to check before rewriting my stores/actions to another structure if I don't have to.

Thanks!

[bsdo64]

export default alt.createActions(TodoActions, 'TodoActions'); Have you try this??

[sloanwolf]

@bsdo64 No that fails with Cannot create property ____ on string 'UserActions'

[goatslacker]

What's the error? Is there an error?

Also, you're binding a new function in componentWillMount which will cause memory leaks. https://medium.com/@goatslacker/react-0-13-x-and-autobinding-b4906189425d#.buqhe5grv

[sloanwolf]

@goatslacker There is no error. Here is some debug output.

Actions

saveUser(data) {
    console.log('saveUser', 'outside');
    return (dispatch) => {
      console.log('saveUser', 'inside dispatcher');
      this.saveUserSuccess(data);
    }
  }

Store

onSaveUserSuccess(payload) {
    console.log('saveUser', 'onSaveUserSuccess');
    this.user = payload;
    db._asyncSave(constants.USER_STORAGE_KEY, this.user);
  }

Console

saveUser outside                      UserActions.js:147
saveUser inside dispatcher       UserActions.js:149

I will fix up the memory leak issue though, thanks for that info.

Sorry from the Store I use this.bindActions(this.alt.getActions('UserActions')); if that makes any difference.

[sloanwolf]

Think I figured it out. Seems to be working both un-minified and minified

Changed: this.bindActions(this.alt.getActions('UserActions')); To

this.bindListeners({
      onLoadUserSuccess: UserActions.LOAD_USER_SUCCESS,
      onLoadUserFail: UserActions.LOAD_USER_FAIL,
      onSaveUserSuccess: UserActions.SAVE_USER_SUCCESS,
      onClearUserSuccess: UserActions.CLEAR_USER_SUCCESS,
    });

Confirmed, works in minified offline bundle.

[goatslacker]

Ah yes your actions class name was getting minified and thus there was no "UserActions"

In the future you can avoid this by setting a "displayName" property on your class...

class Foo { static displayName = 'Foo'; }