Search code examples
reactjsreduxreact-reduxredux-form

Redux-form not working


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.

check dispatched action and next state, it returns a form() function

I am not using combineReducers in my reducer. Is it necessary to use combineReducers?

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;

Solution

  • 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 !