React Recompose Initial state value form Async Source

Question

In the following example in recompose, withState has an initial value of empty string. What if you needed a value form a database or dynamic source, how would you have it update on that prop change?

For example:

withState('value', 'updateValue', (user) => user.name)

Original code from recompose;

const enhance = compose(
  withState('value', 'updateValue', ''),
  withHandlers({
    onChange: props => event => {
      props.updateValue(event.target.value)
    },
    onSubmit: props => event => {
      event.preventDefault()
      submitForm(props.value)
    }
  })
)

const Form = enhance(({ value, onChange, onSubmit }) =>
  <form onSubmit={onSubmit}>
    <label>Value
      <input type="text" value={value} onChange={onChange} />
    </label>
  </form>
)

Perspective · Answer 1 · 2017-05-24T06:57:51.400

Given the example above, I just branched;

v4 I just seem to have race conditions so I made sure that these specific components wouldn't render until it's considered done loading. Now I can go back to the original code;

v3 The following works, and perhaps their is a better way or tools I could be using within recompose.

withState('value', 'updateValue', ''),
withPropsOnChange(['name'], (props) => assign(props, { value: props.name })),

v2 By removing branch and adding withPropsOnChange I was able to achieve what I wanted. (or so it seemed)

withPropsOnChange(['name'], ({ name }) => ({ name })),
withState('nameValue', 'updateNameValue', ({ name }) => name ),

v1 First Attempt: (Did not work out too well)

const enhance = compose(
  branch(
    ({ name }) => !name,
    renderNothing
  )
  withState('value', 'updateValue', ({ name }) => name),
  withHandlers({
    onChange: props => event => {
      props.updateValue(event.target.value)
    },
    onSubmit: props => event => {
      event.preventDefault()
      submitForm(props.value)
    }
  })
)

const Form = enhance(({ value, onChange, onSubmit }) =>
  <form onSubmit={onSubmit}>
    <label>Value
      <input type="text" value={value} onChange={onChange} />
    </label>
  </form>
)

An issue pop-ed up from the above implementation, if the `name` property does not exist the form would never load for a user that never has the name property created. — Perspective, May 24 '17 at 02:42

score 1 · Answer 2 · answered May 24 '17 at 13:46

You can get the value asynchronously below the state, and then call the updater. React Docs suggest to do these things in componentDidMount

const enhancer = compose(
  withState('value', 'updateValue', ({ name }) => name),
  withHandlers({
    onChange: props => event => {
      props.updateValue(event.target.value)
    },
    onSubmit: props => event => {
      event.preventDefault()
      submitForm(props.value)
    }
  }),
  lifecycle({
    componentDidMount () {
      fetchName().then(this.props.updateValue)
    }
  }),
  branch(({ name }) => !name, () => null)
)

@lsaddo yea, thanks for this and linking to the docs. I usually try to avoid the lifecycle, but this makes sense. — Perspective, May 24 '17 at 17:40

React Recompose Initial state value form Async Source

2 Answers2