Question

您知道如何从给定的表单中获取字段名称的有序列表吗？ Instance API有一个名为“ fieldList”的属性，它是一个数组，但顺序不正确。（{ordered list = [firstFieldName, secondFieldName, ...]，所以我需要的是字段名列表，以便它们在我的表单中显示-从上到下）

同样，redux-form'操作'@@redux-form/REGISTER_FIELD'的派发顺序不正确，所以我想这不是我所需要的...

（我的redux格式版本： 7.3.0 ）

Answer 1

我有redux-form的使用经验，也检查过它的API，但是没有找到记录字段中表单形式的记录方式。

但是，这是我的处理方式：

我将创建一个Reducer，它将按顺序跟踪字段，它们已注册（以表格形式显示）。

我们有非常详细的操作。正如您已经提到的-@@redux-form/REGISTER_FIELD操作正在以正确的顺序分配正在注册的所有字段。该操作具有以下有效负载：
```
{
  type: '@@redux-form/REGISTER_FIELD',
  meta: {
    form: 'user'
  },
  payload: {
    name: 'firstName',
    type: 'Field'
  }
}
```

创建减速器。因此，我将创建一个Reducer，它将监听所有@@redux-form/REGISTER_FIELD的动作。像这样：

// The reducer will keep track of all fields in the order they are registered by a form.
// For example: `user` form has two registered fields `firstName, lastName`:
// { user: ['firstName', 'lastName'] }
const formEnhancedReducer = (state = {}, action) {
  switch (action.type) {
    case '@@redux-form/REGISTER_FIELD':
      const form  = action.meta.form
      const field = action.payload.name

      return { ...state, [form]: [...state[form], field] }
    default:
      return state
  }
}

用法。为了按表单获取有序字段，您只需访问表单名称为state.formEnhanced.user的Store（州）formEnhancer属性。

请记住，您必须将某些情况视为@@redux-form/DESTROY，但我认为这是一个非常简单的实现。

我希望保持简单，只订阅@@redux-form/REGISTER_FIELD，只是稍微改变一下reducer的实现，以防止表单字段重复。因此，我将仅验证表单字段是否已注册，并且不关心是否支持@@redux-form/DESTROY。

希望有帮助。

Answer 2

我能够从给定表单中检索表单字段名称的有序列表的一种方法是，通过使用存储在redux表单状态中的已注册字段，使用来自'react-redux'的connect HOC（高阶组件）：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import _ from 'lodash';

class Foo extends Component {

  render() {

    const {
      registeredFields,
    } = this.props;

    ...
    ...
    ...

  }

}

const mapStateToProps = (state, props) => {

  // retrieve the registered fields from the form that is stored in redux state; using lodash 'get' function
  const registeredFields = _.get(state, 'form.nameOfYourForm.registeredFields');

  // creating an object with the field name as the key and the position as the value
  const registeredFieldPositions = _.chain(registeredFields).keys().reduce((registeredFieldPositions, key, index) => {
    registeredFieldPositions[key] = index;
    return registeredFieldPositions;
  }, {}).value();

  return({
    registeredFieldPositions,
  });

};

// registeredFieldPositions will now be passed as a prop to Foo
export default connect(mapStateToProps)(Foo);

Redux格式字段的有序列表

2 个答案: