CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-form
Andrew
Andrew

Reputation: 68

Redux form is not storing input field values into redux state

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,
    ...
})

Upvotes: 0

Views: 2544

Answers (1)

Stephen L
Stephen L

Reputation: 2339

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.

Upvotes: 1

Related Questions