How to use react-compose-state with connect() and withRouter()?

[ldco2016]

Hello dai-shi,

I would like to implement your react-compose-state importing the following:

import PropTypes from "prop-types";
import { composeWithState } from "react-compose-state";

What I am not clear on is how to wire it up for my functional component when I already have this:

export default connect(
  mapStateToProps,
  actions
)(withRouter(SurveyFormReview));

How do I refactor the above to include something like this example:

export default composeWithState({ text: '' })(TextBox);

[dai-shi]

You could do it like this:

export default connect(
  mapStateToProps,
  actions
)(withRouter(composeWithState({ text: '' })(SurveyFormReview)));

But this becomes a bit ugly. You might want to use recompose in such a complex scenario.

export default compose(
  connect(
    mapStateToProps,
    actions
  ),
  withRouter,
  withState('text', 'setText', '')
)(SurveyFormReview);

---

Note: Those are only applicable to below React 16.8 which has hooks.