I am trying to use redux-form. I followed the documentation, but when I type something in the input box nothing seems to happen (No letters show up in the input). When I look at the console, I can see the action is dispatched. Attaching screenshot.
I am not using
combineReducers
in my reducer. Is it necessary to usecombineReducers
?
Login Form
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
class LoginForm extends Component {
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="firstName">First Name</label>
<Field name="firstName" component="input" type="text"/>
</div>
<div>
<label htmlFor="lastName">Last Name</label>
<Field name="lastName" component="input" type="text"/>
</div>
<div>
<label htmlFor="email">Email</label>
<Field name="email" component="input" type="email"/>
</div>
<button type="submit">Submit</button>
</form>
);
}
}
LoginForm = reduxForm({
form: 'LoginFormForm' // a unique name for this form
})(LoginForm);
export default LoginForm;
Reducer
import { GET_TICKET_LIST, REQUEST_TICKET_LIST } from './actions';
import { reducer as formReducer } from 'redux-form';
const ticketListReducer = (state, action) => {
switch(action.type){
case REQUEST_TICKET_LIST:
return {...state, isFetching: true}
case GET_TICKET_LIST:
return {...state, ticketList: action.ticketList, isFetching: false}
default: return state;
}
}
const allReducers = (state = {}, action) => {
return {
ticketList: ticketListReducer(state.ticketList, action),
form: formReducer
};
};
export default allReducers;
You have to pass the formReducer
to your combinedReducer
call in your root reducers index.js file. Here is the sample code.
import { combineReducers } from 'redux';
import OtherReducer from './reducer_posts';
import { reducer as formReducer } from 'redux-form'
const rootReducer = combineReducers({
posts: OtherReducer,
form: formReducer
});
export default rootReducer;
Please find additional information here.
Hope this helps. Happy Coding !