Redux Form 使用教程

Redux Form 使用教程

redux-formA Higher Order Component using react-redux to keep form state in a Redux store项目地址:https://gitcode.com/gh_mirrors/re/redux-form

项目介绍

Redux Form 是一个使用 react-redux 的高阶组件，用于将表单状态保持在 Redux 存储中。它允许你在 React 组件中管理表单的状态，并且与 Redux 的状态管理紧密集成。Redux Form 提供了丰富的 API 和功能，使得处理表单数据变得简单和高效。

项目快速启动

安装

首先，你需要安装 Redux Form：

npm install --save redux-form

基本使用

以下是一个简单的 Redux Form 示例：

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

const SimpleForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>First Name</label>
        <div>
          <Field name="firstName" component="input" type="text" placeholder="First Name" />
        </div>
      </div>
      <div>
        <label>Last Name</label>
        <div>
          <Field name="lastName" component="input" type="text" placeholder="Last Name" />
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'simple' // a unique identifier for this form
})(SimpleForm);

连接到 Redux

确保你的应用已经配置了 Redux 和 React-Redux：

import { createStore, combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import { Provider } from 'react-redux';
import React from 'react';
import ReactDOM from 'react-dom';
import SimpleForm from './SimpleForm';

const rootReducer = combineReducers({
  form: formReducer
});

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <SimpleForm onSubmit={values => console.log(values)} />
  </Provider>,
  document.getElementById('root')
);

应用案例和最佳实践

同步验证

Redux Form 支持同步验证，可以在提交表单之前验证字段：

const validate = values => {
  const errors = {};
  if (!values.firstName) {
    errors.firstName = 'Required';
  }
  if (!values.lastName) {
    errors.lastName = 'Required';
  }
  return errors;
};

export default reduxForm({
  form: 'simple',
  validate
})(SimpleForm);

异步验证

Redux Form 也支持异步验证，例如检查用户名是否已被占用：

const asyncValidate = (values /*, dispatch */) => {
  return fetch(`/api/validate?username=${values.username}`)
    .then(response => response.json())
    .then(json => {
      if (json.exists) {
        throw { username: 'Username already exists' };
      }
    });
};

export default reduxForm({
  form: 'simple',
  asyncValidate,
  asyncBlurFields: ['username']
})(SimpleForm);

典型生态项目

Redux Form 可以与其他 Redux 生态项目无缝集成，例如：

• Redux Saga: 用于处理异步操作和副作用。
• Redux Persist: 用于持久化 Redux 状态。
• React Router: 用于管理应用的路由。

这些工具可以帮助你构建更复杂和功能丰富的应用。

通过以上步骤和示例，你应该能够快速上手并使用 Redux Form 来管理你的表单状态。

redux-formA Higher Order Component using react-redux to keep form state in a Redux store项目地址:https://gitcode.com/gh_mirrors/re/redux-form