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 来管理你的表单状态。