Redux Form - initialValues not updating with state

Question

I am having some issues with setting the inital form field values using redux-form.

I am using redux-form v6.0.0-rc.3 and react v15.3.0.

So here's my issue, I have a grid of users and when a user row is clicked on, I am navigating to an edit users page and including the users id in the url. Then on the edit users page, I am grabbing the id and calling fetchUser(this.props.params.id) which is an action creator that returns this.state.users. I am then attempting to set the forms inital values by calling:

function mapStateToProps(state) {
    return { initialValues:  state.users.user }
}

By my understanding, this should set the initialValues to state.users.user and whenever this state is updated the initialValues should be updated as well. This is not the case for me. InitialValues is being set to the previously clicked on user row (i.e the previous state for this.state.users.user). So I decided to test this and add a button to this component and when its clicked I am calling fetchUser again with a user id hard coded in:

this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3');

This is updating the state correctly but the values for initialValues do not change. It is not getting updated when the state is updated. I tested this exact same process on an older version of redux-form and it worked as expected.

Am I doing something wrong here or is this an issue with the version I am using.

Users Edit Form -

class UsersShowForm extends Component {

    componentWillMount() {
        this.props.fetchUser(this.props.params.id);
    }

    onSubmit(props){
        console.log('submitting');
    }

    changeUser() {
        this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3');
    }

    renderTextField(field) {
        return (
      <TextField 
        floatingLabelText={field.input.label}
        errorText={field.touched && field.error}
        fullWidth={true}
        {...field.input}
      />)
    }

    render() {
        const { handleSubmit, submitting, pristine } = this.props;

        return(

            <div>
                <form onSubmit={handleSubmit(this.onSubmit.bind(this))} className="mdl-cell mdl-cell--12-col">

                    <Field name="emailAddress" component={this.renderTextField} label="Email Address"/>

                    <Field name="firstName" component={this.renderTextField} label="First Name"/>

                    <Field name="lastName" component={this.renderTextField} label="Last Name"/>
                </form>

                <RaisedButton onClick={this.changeUser.bind(this)} label="Primary" primary={true} />
            </div>

        );
    }
}

function mapStateToProps(state) {
    return { initialValues:  state.users.user }
}

UsersShowForm = reduxForm({
  form: 'UsersShowForm'
})(UsersShowForm)

UsersShowForm = connect(
  mapStateToProps,
  actions              
)(UsersShowForm)

export default UsersShowForm

Users Reducer -

import {
    FETCH_USERS,
    FETCH_USER
} from '../actions/types';

const INITIAL_STATE = { all: [], user: {} };

export default function(state = { INITIAL_STATE }, action) {
    switch (action.type) {
        case FETCH_USERS:
            return {...state, all: action.payload };
        case FETCH_USER:
            return {...state, user: action.payload };
        default:
            return state;
    }

}

Reducer Index -

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import usersReducer from './users_reducer';

const rootReducer = combineReducers({
    form: formReducer,
    users: usersReducer
});

export default rootReducer;

Answer 1

I was facing the same problem after update to redux-form v6.0.0-rc.4.

I solved setting enableReinitialize to true

UsersShowForm = reduxForm({
  form: 'UsersShowForm',
  enableReinitialize: true
})(UsersShowForm)