title: React Native + Redux: Form to edit own profile
body: <p>How can I pre-fill form fields with my own profile values?</p>
  
  <p>ie. see my First Name, Last Name and Email fields populated on my Setting's page, so I could change them if needed.</p>
  
  <p>Here are the relevant code, in case it would help.</p>
  
  <h2>Call to action:</h2>
  
  <pre><code>import { Actions } from 'react-native-router-flux';
  
  &lt;Button onPress={ () =&gt; { Actions.profileEdit(); } } /&gt;
  </code></pre>
  
  <h2>ProfileEdit:</h2>
  
  <pre><code>import _ from 'lodash';
  import React, { Component } from 'react';
  import ProfileForm from './ProfileForm';
  
  componentWillMount() {
    this.props.profileFetch()
  
    _.each(this.props.profile, (value, prop) =&gt; {
      this.props.profileUpdate({ prop, value });
    })
  }
  
  onButtonPress() {
    const { firstName, lastName, email } = this.props;
  
    this.props.profileSave({ firstName, lastName, email });
  }
  
  class ProfileEdit extends Component {
    render() {
      &lt;ProfileForm {...this.props} /&gt;
  
      &lt;Button onPress={this.onButtonPress.bind(this)}&gt;
        &lt;Text&gt;Save Changes&lt;/Text&gt;
      &lt;/Button&gt;
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    const { firstName, lastName, email } = state.profileForm;
  
    return { firstName, lastName, email };
  };
  
  export default connect(mapStateToProps, { profileFetch, profileSave, profileUpdate })(ProfileEdit);
  </code></pre>
  
  <h2>ProfileForm:</h2>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { profileUpdate } from '../../actions';
  
  class ProfileForm extends Component {
    render() {
      return (
        &lt;Form&gt;
          &lt;Input
            placeholder="First Name"
            value={this.props.firstName}
            onChangeText={value =&gt; this.props.profileUpdate({ prop: 'firstName', value })}
          /&gt;
        &lt;/Form&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    const { firstName, lastName, email } = state.profileForm;
  
    return { firstName, lastName, email };
  };
  
  export default connect(mapStateToProps, { profileUpdate })(ProfileForm);
  </code></pre>
  
  <h2>ProfileActions:</h2>
  
  <pre><code>export const profileFetch = () =&gt; {
    const { currentUser } = firebase.auth();
  
    return (dispatch) =&gt; {
      firebase.database().ref(`/users/${currentUser.uid}/profile`)
        .on('value', (snapshot) =&gt; {
          dispatch({ type: PROFILE_FETCH_SUCCESS, payload: snapshot.val() });
        });
    };
  };
  
  export const profileSave = ({ firstName, lastName, email }) =&gt; {
    const { currentUser } = firebase.auth();
  
    return (dispatch) =&gt; {
      firebase.database().ref(`/users/${currentUser.uid}/profile`)
        .set({ firstName, lastName, email })
        .then(() =&gt; {
          dispatch({ type: PROFILE_SAVE_SUCCESS });
          Actions.profileEdit({ type: 'reset' });
        });
    };
  };
  
  export const profileUpdate = ({ prop, value }) =&gt; {
    return {
      type: PROFILE_UPDATE,
      payload: { prop, value }
    };
  };
  </code></pre>
  
  <h2>ProfileFormReducer:</h2>
  
  <pre><code>const INITIAL_STATE = {
    firstName: '',
    lastName: '',
    email: ''
  };
  
  export default (state = INITIAL_STATE, action) =&gt; {
    switch (action.type) {
      case PROFILE_UPDATE:
        return { ...state, [action.payload.prop]: action.payload.value };
      case PROFILE_SAVE_SUCCESS:
        return INITIAL_STATE;
      default:
        return state;
    }
  };
  </code></pre>
  
  <h2>ProfileReducer:</h2>
  
  <pre><code>const INITIAL_STATE = {};
  
  export default (state = INITIAL_STATE, action) =&gt; {
    switch (action.type) {
      case PROFILE_FETCH_SUCCESS:
        return action.payload;
      default:
        return state;
    }
  };
  </code></pre>
  
  <p>Thanks for your help!</p>