Issues with actions not being replaced when modules change

[leidegre]

I'm using Redux and when I make changes to the actions (action creators file) I can see that the modules are being reloaded but when I invoke the actions the old actions are still being called. I'm having a bit of an issue trying to zero in on the root cause but I'm working on it.

I'm leaving this here for now, this might not be the best place for the issue but I'm quite certain that the issue is not with Redux but something about the constructor not being rerun on update? or, that the closure is capturing the old action reference and won't see the new action references for that reason.

I've tried both with and without mapDispatchToProps same result.

Here's a snippet of the class structure, for reference

class SearchBox extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: props.value
    }
    this._valueChanged = (e) => {
      this.setState({
        value: e.target.value
      })
    }
    this._valueKeyPressesd = (e) => {
      if (e.charCode === 13) {
        // this.props.dispatch(setTerm({term: this.state.value}))
        this.props.setTerm({term: this.state.value})
      }
    }
    this._searchClicked = (e) => {
      // this.props.dispatch(setTerm({term: this.state.value}))
      this.props.setTerm({term: this.state.value})
    }
  }

  render() {
    return (
      <div className='row'>
        <div className='col-md-8'>
          <input className='form-control' type='text' value={this.state.value} onChange={this._valueChanged} onKeyPress={this._valueKeyPressesd} />
        </div>
        <div className='col-md-4'>
          <button className='btn btn-default' type='button' onClick={this._searchClicked}>Go!</button>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    value: state.search.get('term')
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ setTerm }, dispatch)
}

[gaearon]

This is because Babel plugin doesn’t wrap module exports automatically and can’t currently detect connect() returns a React component. This issue is described in gaearon/babel-plugin-react-transform#26.

You can use React Hot Loader which doesn’t have this problem.

Alternative, since you use Redux, you can just drop React Transform completely and use vanilla HMR API. In this case, hot reloading action creators will work fine, but React local component state and DOM won’t be preserved (which admittedly is not a terrible issue for Redux apps anyway). See an example of this approach in reduxjs/redux#1455.

[leidegre]

Thanks for the update.

[gaearon]

This is fixed in React Hot Loader 3.
It is built with lessons learned from both React Hot Loader and React Transform.
It’s still in alpha but I encourage you to check it out!