Redux 形式不工作

Question

我正在尝试使用 redux-form。我按照文档进行操作，但是当我在输入框中键入内容时，似乎什么也没有发生（输入中没有显示任何字母）。当我查看控制台时，我可以看到操作已分派。附上屏幕截图。

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

登录表单

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;

减速机

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;

Answer 1

您必须将 formReducer 传递给根减速器 index.js 文件中的 combinedReducer 调用。这是示例代码。

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;

请查找更多信息 here。

希望这对您有所帮助。编码愉快！

Redux 形式不工作

Redux-form not working

reactjs

redux

redux-form

react-redux