components don't seem to be hot reloading changes to action creators

[jedwards1211]

I have the following action in actions.js:

export function reorderBlocks(viewId, newOrder) {
  return {
    type: REORDER_BLOCKS,
    payload: newOrder,
    meta: {
      context,
      viewId,
    },
  };
}

It's used by ReduxDashboardView.jsx:

import {
  reorderBlocks, 
  ...
} from './actions';

class ReduxDashboardView extends Component {
  ...
  onReorderFinished = () => {
    let {model} = this.state;
    let viewId = model.get('_id');
    let newOrder = model.getIn(['data', 'blocks']).map(block => block.get('_id')).toArray();
    this.props.dispatch(reorderBlocks(viewId, newOrder));
  }
  render() {
    let {model} = this.state;
    let {onReorderBlocks, onReorderFinished, onResizeBlock, onResizeFinished} = this;
    return <DashboardView {...this.props} model={model}
      onReorderBlocks={onReorderBlocks} onReorderFinished={onReorderFinished}
      onResizeBlock={onResizeBlock} onResizeFinished={onResizeFinished}/>;
  }
}

Now if I add console.log('test'); at the top of reorderBlocks and save, the browser appears to indicate that everything has been hot updated, yet when I trigger the action again, it doesn't print to console. But when I refresh the page and trigger the action again, it does print to console.

I had assumed what would happen in this case is that the react-transform-hmr wrapper for the parent of ReduxDashboardView ends up re-requiring ReduxDashboardView.jsx (which requires the new actions.js in turn) and mounts a completely new <ReduxDashboardView> that can call the new reorderBlocks. But I'm guessing that's not what happens -- is it impossible for react-transform-hmr to hot reload in this case or am I doing something wrong?

[jedwards1211]

I should add, I am dynamically choosing whether to render a ReduxDashboardView or another view type in the following parent ViewHolder component. Could this potentially be interfering with hot reloading? Would React.createElement interfere?

import React, {Component} from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import {connect} from 'react-redux';

import Alert from 'mindfront-react-components/bootstrap/Alert';

import viewTypes from 'viewTypes';

class ViewSwapper extends Component {
  static propTypes = {
    params: React.PropTypes.shape({
      viewId: React.PropTypes.string.isRequired,
    }).isRequired,
    model:        ImmutablePropTypes.shape({
      type:         React.PropTypes.string.isRequired,
    }),
    sessionState: React.PropTypes.object,
  }
  render() {
    let {model, params: {viewId}} = this.props;
    if (!model) {
      return <Alert.Danger>
        View {viewId} not found
      </Alert.Danger>;
    }
    let viewType = viewTypes[model.get('type')];
    if (viewType) {
      return React.createElement(viewType.component, this.props);
    }
    return <Alert.Danger>
      View settings for view {viewId} appear to be corrupted
    </Alert.Danger>;
  }
}

export default class ViewHolder extends Component {
  static propTypes = {
    params: React.PropTypes.shape({
      viewId: React.PropTypes.string.isRequired,
    }).isRequired,
  }
  selector = (state) => {
    let viewId = this.props.params.viewId;
    return {
      model:        state.getIn(['views', viewId]),
      sessionState: state.getIn(['viewSessionStates', viewId]),
    }
  }
  render() {
    return React.createElement(connect(this.selector)(ViewSwapper), this.props, this.props.children);
  }
}

[gaearon]

This is currently a limitation of babel-plugin-react-transform.
I'll try to fix it later this month.
Please track gaearon/babel-plugin-react-transform#26.

[jedwards1211]

Cool, thanks!

[gaearon]

You might be interested in reduxjs/redux#1455.

[jedwards1211]

Ah, I haven't used that preset, thanks for letting me know!