aditya kumar
aditya kumar

Reputation: 3023

How to pass default values to redux form

I have build a redux form it's a user profile form where user can edit profile detail For that. I want to put initial Value that is available in backend after that they can edit them as well. But I tried the way doc says https://redux-form.com/6.0.0-alpha.4/examples/initializefromstate/ but It is not working at all. I am getting initial value from api and storing it in redux store.

EditFormPage.jsx

let  EditProfileForm =(props) => {


    const [image, setImage]  = useState(null);
    const {handleSubmit, pristine, reset, submitting, classes} = props;

    const dispatch = useDispatch();
    const getDroppedImage = (imageSrc) => {

        setImage(imageSrc);
    }

    const getCroppedImage = (imageUrl) =>{
        //props.getProfileImage(imageUrl);
        dispatch(uploadProfileImage(imageUrl));
    }

    const data = {
        profilePic : props.profileDetail.profilePic,
        name : 'Hell ow',
        dob : props.profileDetail.dateOfBirth,
        sex: props.profileDetail.gender,
        contact: props.profileDetail.phoneNumber,
        address: props.profileDetail.address
    }
    useEffect(() => {

        load(data);
    }, [data])

    return (
        <Grid container className={"container edit_profile"}>
            <Grid className="profile_menu global-padding" container>
                    <form onSubmit={handleSubmit}>
                        <Grid
                            container
                            alignItems="center"
                            justify="flex-end"
                            className="profile_menu_list"
                            xs={12}
                        >
                            <Field
                                type="file"
                                name="profilePic"
                                component={EditDropZone}
                                image={image}
                                getDroppedImage={getDroppedImage}
                            />
                        </Grid>
                        <Grid
                            container
                            alignItems="center"
                            justify="flex-end"
                            className="profile_menu_list"
                            xs={12}
                        >
                            <Field name="name" component={renderInputField} />
                        </Grid>
                        <Grid
                            container
                            alignItems="center"
                            justify="flex-end"
                            className="profile_menu_list"
                            xs={12}
                        >
                            <Field
                                name="dob"
                                showTime={false}
                                component={renderDateTimePicker}
                            />
                        </Grid>
                        <Grid
                            container
                            alignItems="center"
                            justify="flex-end"
                            className="profile_menu_list"
                            xs={12}
                        >

                            <Field style={{flexDirection: 'row'}} name="sex" component={renderRadioButton}>
                                <RadioButton value="male" label="male"/>Male
                                <RadioButton value="female" label="female"/>Female
                            </Field>
                        </Grid>
                        <Grid
                            container
                            alignItems="center"
                            justify="flex-end"
                            className="profile_menu_list"
                            xs={12}
                        >
                            <Field name="contact" normalize={normalizePhone} component={renderInputField} />
                        </Grid>
                        <Grid
                            container
                            alignItems="center"
                            justify="flex-end"
                            className="profile_menu_list"
                            xs={12}
                        >
                            <Field name="address" component={renderInputField} />
                        </Grid>
                        <div style={{paddingTop: '20px'}}>
                            <LoadingButton type={"submit"} title={'Save'}/>
                        </div>
                    </form>
                </Grid>
                <Grid xs={12}>
                    <ImageModal
                        getCroppedImage={getCroppedImage}
                        image={image}
                    />
                </Grid>
            </Grid>
        </Grid>
    )


}

EditProfileForm = reduxForm({
    form: 'EditProfileForm',

    validate
})(EditProfileForm);
EditProfileForm = connect(
    state => ({
        initialValues: state.editProfileData.profileData
    }),{load: load }
)(EditProfileForm)

export default EditProfileForm;

Any help would be great I am stuck here.

Upvotes: 1

Views: 285

Answers (1)

ArtDev
ArtDev

Reputation: 543

You will need to pass enableReinitialize: true in the form. Since you are passing values by the API calls, there would be some delay. But Redux-form tried to show default value which is still undefined. So, you would not be able to show default values from the API calls. by enabling this option, when props are updated, your profile form will show those values as default.

EditProfileForm = reduxForm({
    form: 'EditProfileForm',
    enableReinitialize: true, // need to set as True to reflect updated props.
    validate
})(EditProfileForm);
EditProfileForm = connect(
    state => ({
        initialValues: state.editProfileData.profileData
    }),{load: load }
)(EditProfileForm)

Upvotes: 1

Related Questions