My pany is using repose as our state management tool. We are refactoring our application to use hooks. For the code below, how would you replace repose ponent with react hook ponents?

I understand that withState bees useState, such as:

withState('something', 'setSomething', null)

bees

const [something, setSomething] = useState(null);

What would withProps, withHandlers, pose, hoistStatics and lifecycle change to?

How would mapStateToProps and mapDispatchToProps work?

import { pose, hoistStatics, withHandlers, withState, withProps, lifecycle } from 'repose';
import { connect } from 'react-redux'
import myComponent from './myComponent'

const mapStateToProps = (state, props) => {
  return {

  }
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({

  }, dispatch)
};

const enhancer = pose(
  connect(mapStateToProps,mapDispatchToProps),
  withProps(props => ({
    myProp: props.myProp,
  })),
  withState('something', 'setSomething', null),
  withState('somethingElse', 'setSomethingElse', null),
  withHandlers({
    myFunction: () => () => {
      console.log(`I need help`);
    }
  }),
  lifecycle({
    ponentDidMount() {

    },
    ponentDidUpdate() {

    }
  })
);

export default hoistStatics(enhancer)(myComponent);

My pany is using repose as our state management tool. We are refactoring our application to use hooks. For the code below, how would you replace repose ponent with react hook ponents?

I understand that withState bees useState, such as:

withState('something', 'setSomething', null)

bees

const [something, setSomething] = useState(null);

What would withProps, withHandlers, pose, hoistStatics and lifecycle change to?

How would mapStateToProps and mapDispatchToProps work?

import { pose, hoistStatics, withHandlers, withState, withProps, lifecycle } from 'repose';
import { connect } from 'react-redux'
import myComponent from './myComponent'

const mapStateToProps = (state, props) => {
  return {

  }
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({

  }, dispatch)
};

const enhancer = pose(
  connect(mapStateToProps,mapDispatchToProps),
  withProps(props => ({
    myProp: props.myProp,
  })),
  withState('something', 'setSomething', null),
  withState('somethingElse', 'setSomethingElse', null),
  withHandlers({
    myFunction: () => () => {
      console.log(`I need help`);
    }
  }),
  lifecycle({
    ponentDidMount() {

    },
    ponentDidUpdate() {

    }
  })
);

export default hoistStatics(enhancer)(myComponent);

• javascript
• reactjs
• react-native
• react-hooks
• repose

2 Answers 2

Citing Dan Abramov:

To get productive, you need to “think in effects”, and their mental model is closer to implementing synchronization than to responding to lifecycle events.

We can not replace hooks and hocs 1:1, since they are different programming models. Still, we can try migrating by:

withProps - can be replaced as const inside the ponent

withHandlers - can be replaced as an arrow function inside the ponent

lifecycle - https://stackoverflow./a/55502524/3439101

A simple example (not with all the cases):

with hocs

const enhancer = pose(
  withProps(props => ({
    myProp: props.myProp,
  })),
  withState('something', 'setSomething', null),
  withHandlers({
    myFunction: () => () => {
      console.log(`I need help`);
    }
  }),
  lifecycle({
    ponentDidMount() {
      console.log('mounted')
    }
  })
);

with hooks

const MyComponent = props => {
  const [something, setSomthing] = useState(null)

  useEffect(() => {
    console.log('mounted')
  }, [])

  const myProp = props.myProp

  const myFunction = () => {
    console.log(`I need help`);
  }
}

You are right, withState can be replaced with useState.

For Redux part, React remend to keep using the API in the same way you have been using it, but you should take this out from pose. In react-redux v7 a new hook will be implemented for this.

Now withHandlers, can be replaced with plain javascript functions, add it to your ponent or any other file

Before:

withHandlers({
    myFunc() => () => {console.log('hello')}
})

Now:

const myFunc = () => {console.log('hello')}

Last but not least, ponentDidMount and ponendDidUpdate will need to be replaced with useEffect. Here there will be a little bit of reading to understand how this works but it is not hard. You will create effects that are basically functions that run every single render, you can pass a second parameter if you want this to run only when something has changed, similar to ponentDidUpdate or an empty array if you want to run only once similar to ponentDidMount. Do not think of effects as replacement of lifecycle events, but you can achieve the same results. Have a look of this article I found it quite useful.

There are few other hooks available, I found useContext, useCallback and useReducer very nice to use .