Redux form is not storing input field values into redux state

Question

I'm using react 15.6.1, react-redux 5.0.5 and redux-form 7.0.3.

The issue that I am currently facing is that when I type any information into the Team the text is not being displayed in the form and the redux state is only storing one character at a time (i.e the last typed character). Below is a snapshot of the redux action state from the dev tools.

type: "@@redux-form/CHANGE
meta: { form: "addTeam", field: "team", touch: true }
payload: "A"

So, the relevant actions are being dispatched, but the state is not being updated correctly. Our redux state is split into multiple routes that correspond to individual pages and team is one of those routes, in which are form values should be. The form data should be stored in state.routes.team.form

This is the index.js

const renderField = ({ input, label, type }) => (
    <div>
        <label>{label}</label>
        <div>
            <input {...input} placeholder={label} type={type} />
        </div>
    </div>
)

const AddTeam = ({ basepath, onSubmit, theme, submitting }) => (
    <FormContainer>
        <FormHeader>Add <span>Team</span></FormHeader>
        <form className={styles[theme]} onSubmit={(event, store) => onSubmit(addAdapter(store.state))}>
            <Field
                component={renderField}
                label="Team"
                type="text"
                name="team"
            />
            <Field
                label="Description"
                name="description"
                type="text"
                component={renderField}
            />
            {/* If there is no Submit button in form, HTML does not submit it on Enter key while field is focued */}
            <input type="submit" style={{ display: 'none' }} />
        </form>
        <FormFooter>
            <button type="button" onClick={() => History.push(basepath)}>CANCEL</button>
            <button type="submit" disabled={submitting}>CREATE</button>
        </FormFooter>
    </FormContainer>
)

renderField.propTypes = {
    input: PropTypes.object.isRequired,
    label: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired
}

AddTeam.propTypes = {
    basepath: PropTypes.string.isRequired,
    onSubmit: PropTypes.func.isRequired,
    theme: PropTypes.string.isRequired,
    submitting: PropTypes.bool
}

const mapDispatchToProps = {
    onSubmit: ACTION_CREATORS.ADD_TEAM
}

export default (connect(null, mapDispatchToProps)(reduxForm({ form: 'addTeam' })(themable(AddTeam))))

reducer

import { combineReducers } from 'redux'
import { reducer } from 'redux-form'
import {
...
} from 'state/store/shared/reducers'
import { teamAdapter } from 'state/store/routes/teams/adapters'
import KEYS from 'state/store/shared/keys'

export default combineReducers({
    form: reducer,
    ...
})

Stephen L · Accepted Answer · 2017-07-31 18:39:58Z

1

Redux form by default stores the text under the form slice of the reducer, so your form data is under getState().form.addTeam. In order to grab the data from your form in another part of the application, redux form suggests you use the selectors provided.

answered Jul 31, 2017 at 18:39

Stephen L

2,35913 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Redux form is not storing input field values into redux state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related