Can't connect store with component without using require and jsx

[joker-777]

Hi,

thanks for your awesome work. I use react, redux and react-redux for a small feature of my Ruby on Rails project. I don't use npm and require and thats why I use the browserified versions of these libs. I also use coffeescript and decided against using jsx. I somehow can't manage to connect my store to my react component. The code looks like this

CustomQuizCreator = React.createClass
  render: ->
    # this.props is somehow empty

# this methods somehow never gets called
mapStateToProps = (state) ->
  lectures: state.lectures

ReactRedux.connect(mapStateToProps)(CustomQuizCreator)

lectures_reducer = (state=[], action) ->
  switch action.type
  # ...

custom_quiz_reducer = Redux.combineReducers
  lectures: lectures_reducer

store = Redux.createStore(custom_quiz_reducer)

React.render(
  React.createElement(ReactRedux.Provider, {store},
    -> React.createElement(CustomQuizCreator)
  ),
  $('#modal_custom_quiz')[0]
)

I hope you guys can help me to figure out what is wrong.

Thanks,

Johannes

[billyjanitsch]

ReactRedux.connect doesn't mutate the component class. It returns a new component class. So, you have to do something like:

ConnectedCustomQuizCreator = ReactRedux.connect(mapStateToProps)(CustomQuizCreator)
# ...
React.render(
  React.createElement(ReactRedux.Provider, {store},
    -> React.createElement(ConnectedCustomQuizCreator)
  ),
  $('#modal_custom_quiz')[0]
)

[gnoff]

@joker-777 not super familiar with coffeescript but @billyjanitsch 's analysis seems to be spot on.

Closing but let me know if the provided solution doesn't resolve the issue.

[joker-777]

@billyjanitsch Thanks so much for your answer. This really fixed it. Could you explain why I have to do this but the documentation doesn't show it. Maybe it is part of this export default but I have no idea. It would be also nice to add it to the documentation.

[gaearon]

Hope this helps: https://github.com/rackt/react-redux/commit/ce6ce7c0b8c0ecd262923ea8974e086a272217c3