使用redux-form和easy-peasy_使用函数提交redux-form_使用formValueSelector的多个Redux-form - 腾讯云开发者社区

使用redux-form和easy-peasy

在React应用中同时使用redux-form和easy-peasy可能会有些复杂，因为这两个库都是用于状态管理，但它们的设计理念和使用方式有所不同。redux-form是专门为Redux设计的表单状态管理库，而easy-peasy提供了一个更简洁的抽象层，用于在React中使用Redux，无需编写大量的boilerplate代码。

使用 redux-form

redux-form允许你将Redux store用作表单数据的存储，这样可以轻松地实现复杂的表单交互和状态同步。要在项目中使用redux-form，你首先需要安装它：

npm install redux-form

然后，你需要在你的Redux store中添加redux-form的reducer：

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

const rootReducer = combineReducers({
  // 你的其他reducer
  form: formReducer
});

const store = createStore(rootReducer);

接下来，你可以创建一个使用redux-form的表单：

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

let ContactForm = props => {
  const { handleSubmit } = 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>
      <button type="submit">Submit</button>
    </form>
  );
};

ContactForm = reduxForm({
  // a unique name for the form
  form: 'contact'
})(ContactForm);

export default ContactForm;

使用 easy-peasy

easy-peasy提供了一个简化的方式来使用Redux，包括内置的immer和reselect，让状态管理更加简单。首先，你需要安装easy-peasy：

npm install easy-peasy

然后，你可以设置你的store并定义一些model：

import { createStore, action } from 'easy-peasy';

const storeModel = {
  todos: [],
  addTodo: action((state, payload) => {
    state.todos.push(payload);
  })
};

const store = createStore(storeModel);

结合使用 redux-form 和 easy-peasy

虽然redux-form和easy-peasy都可以与Redux一起使用，但通常不推荐将它们混合在同一个项目中使用，因为这可能会导致状态管理的逻辑变得复杂和混乱。如果你需要在使用easy-peasy的项目中处理表单，考虑使用React自身的状态管理或其他表单库（如Formik或react-hook-form），这些库可以更自然地与easy-peasy集成。

如果你确实需要在easy-peasy项目中集成redux-form，你需要确保redux-form的reducer被正确地加入到由easy-peasy创建的store中。这通常涉及到自定义easy-peasy store的创建过程，以确保包含redux-form的reducer，这可能会使配置变得复杂。

总之，最好选择一个状态管理策略（使用easy-peasy或传统的Redux加redux-form），并坚持使用它，以避免不必要的复杂性。如果你的应用已经在使用easy-peasy，那么使用如Formik或react-hook-form这样的库可能是更好的选择。

使用redux-form和easy-peasy