Redux表單簡單字段

Question

我有一個簡單的Redux表單，並嘗試遵循此處給出的示例https://redux-form.com/6.2.0/docs/GettingStarted.md/這是我的代碼

用戶form.js

import React from 'react';
import {Field, reduxForm} from 'redux-form';

class UserForm extends React.Component {

    /**
     * User Form goes here...
     */
    render() {
        const { handleSubmit } = this.props;

        return (
            <form role="form" onSubmit={handleSubmit}>
                <div className="box-body">
                    <div className="form-group">
                        <label htmlFor="name">Full Name</label>
                        <Field
                            name="name"
                            component="input"
                            type="text"
                            className="form-control"
                            placeholder="Enter full name..."/>
                    </div>
                    <div className="form-group">
                        <label htmlFor="email">Email address</label>
                        <Field
                            name="email"
                            type="email"
                            component="input"
                            className="form-control"
                            placeholder="Enter email"/>
                    </div>
                    <div className="form-group">
                        <label htmlFor="password">Password</label>
                        <Field
                            name="password"
                            type="password"
                            component="input"
                            className="form-control"
                            placeholder="Password"/>
                    </div>

                </div>
                <div className="box-footer">
                    {/* <button type="submit" className="btn btn-primary">Save</button> */}
                    <button type="submit" className="btn btn-primary" value="Save">Save</button>
                </div>
            </form>
        );
    }
}

UserForm = reduxForm({
    form: 'user'
})(UserForm);

export default UserForm;

上方表格由UserPage容器user-page.js呈現

import React from 'react';

import Page from '../../page';
import UserForm from '../components/user-form';
import UserList from '../components/user-list';

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import UserAction from '../actions';

import {showLoading, hideLoading} from 'react-redux-loading-bar';


/**
 * We might want to create an Abstract Form component to
 * include all common form features.
 */

class UserPage extends Page {




    handleUserSubmit(values) {
        console.log(values);
    }

    /**
     * Content is loaded into page
     */
    content() {
        return (
            <div className="row">
                {/* left column */}
                <div className="col-md-6">
                    {/* general form elements */}
                    <div className="box box-primary">
                        <div className="box-header with-border">
                            <h3 className="box-title">New User</h3>
                        </div>
                        {/* /.box-header */}
                        <UserForm onSubmit={this.handleUserSubmit}/>
                    </div>
                    {/* /.box */}

                </div>
                {/*/.col (left) */}
                {/* right column */}
                <div className="col-md-6">
                    {/* UserList made of <User /> */}

                    {this.userList()}
                    {/* /.box */}
                </div>
                {/*/.col (right) */}
            </div>
        );
    }


}

const mapStateToProps = (state) => ({ //this gets state from reducer and maps to props

            users: state.userList.users,
            fetched: state.userList.fetched,
            error: state.userList.error

});


const mapDispatchToProps = (dispatch) => ({
   actions: bindActionCreators({
       dispatchShowLoading: showLoading,
       dispatchHideLoading: hideLoading,
       dispatchUserList: UserAction.userList
   }, dispatch)
});


export default connect(mapStateToProps, mapDispatchToProps)(UserPage);

我的表單成功呈現，並且可以在Redux Dev工具窗口中看到所有分派的動作，但是當我嘗試在字段中輸入文本時，它什么都不會做，但是動作就像我說的那樣分派了。

抱歉，這聽起來是一個非常基本的問題。 對於React和Redux以及Java而言，我才是新手。

Answer 1

為了使redux格式起作用，需要包括它的reducer，而我忘了包括它，這解決了我的問題。

import { reducer as formReducer } from 'redux-form';

    const allReducers = combineReducers({
        form: formReducer,

    });

    export default allReducers;