Redux-form 6.0+ 更改所有字段值

Question

我正在尝试更改 redux 形式的多个值。我将它们放在一个对象中，所以基本上我想用我的对象值覆盖 redux 形式的状态值。实现它的一种方法是运行 this.props.reset()，然后每个属性有多个 this.props.change() 事件。它可以工作，但它发送的事件太多并且速度很慢。我尝试的第二件事是运行 this.props.initialize(data,false) 这有效但验证不是 re运行所以我可以轻松地提交表单而无需验证。有没有办法运行一个事件用我的对象覆盖表单状态？

Answer 1

我害怕这是不可能的。前段时间我遇到了同样的问题，阅读了所有 redux 形式的文档后我得出结论，你必须使用 action creators。要么更改自动填充。

如果你使用初始化，你正在初始化值，它是用于数据的异步初始化，因此，它不会像你说的那样验证。

很久以前在以前的版本中，他们有一个"defaultValue"的概念。但是他们删除了它。如果您真的不需要上次更新，也许您值得检查一下它是否能以某种方式帮助您。

注意

我建议您遵循此 issue thread。他们在那里谈论它。

Answer 2

有可能。我通过 Create-React-App 文件结构使用 Redux 在 React 中实现了它。

使用 stateProps/dispatchProps 模式。

您应该已经了解要使用它的操作和缩减器。这是我最初用 https://medium.com/@notrab/getting-started-with-create-react-app-redux-react-router-redux-thunk-d6a19259f71f

开始的项目

我把它包括在内，这样当我使用 reducers 和 actions 等术语时，您就会知道我在说什么。

在你actions/index文件

import makeAction from "./makeActionCreator";

const clearMultiplePropertiesInState = "clearMultiplePropertiesInState";

export default {
  constants: {
    clearMultiplePropertiesInState,
  },

  creators: {
    clearMultiplePropertiesInState: makeAction(clearMultiplePropertiesInState
  }
};

在你的reducers/{your-reducer}.js

import actions from '../actions';
const { constants } = actions;

const INITIAL_STATE = {
  name: "Dr Hibbert",
  age: "40",
  height: "180cm"
};

//#region const declarations
const { clearMultiplePropertiesInState } = constants;
//#endregion

export default function (state = INITIAL_STATE, action) {
  switch (action.type) {

    case clearMultiplePropertiesInState: {
      var fields = action.data;

      var theState = {
        ...state
      };

      for(var i = 0; i < fields.length; i++) {
        theState[fields[i]] = "";
      }

      return theState;
    }

    default:
      if (!action.type.includes('@@')) {
        console.log(`No action for: ${action.type} type`);
      }

      return state;
  }
}

所以您要清除的三个项目是 state.name、state.age 和 state.height

import React from "react";
import { connect } from "react-redux";
import { Form, Icon, Button, Modal } from "semantic-ui-react";
import actions from "common/actions";
const { creators } = actions;


const MyComponent = ({ stateProps, dispatchProps }) => {

  return (
    <React.Fragment>
        <Button
          disabled={disableOkButton}
          onClick={() => {
                dispatchProps.clearMultiplePropertiesInState(["name", "age", "height"]);
          }}
          primary
          labelPosition='right'
          icon='checkmark'
          content="Create Club"
          loading={stateProps.modalOkButtonLoading}
        />
    </React.Fragment>
  );
}

function mapStatetoProps(state) {
  return {
    stateProps: {
      name: state.name,
      age: state.age,
      height: state.height
    }
  };
}

function mapDispatchToProps(dispatch) {
  return {
    dispatchProps: {

      clearMultiplePropertiesInState: (fieldNames) => {
        dispatch(creators.clearMultiplePropertiesInState(fieldNames));
      }
    }
  };
}

export default connect(mapStatetoProps, mapDispatchToProps)(MyComponent);

正如我所说，您需要精通将 React 与 Redux 结合使用才能理解这一点，但这是可能的。此示例显示我同时重置了 3 个值。因此成像也传递了新的值...

我通常有一个我使用的 changeSinglePropInState 操作（没有包含在代码中），它传递它想要在状态中更改的 fieldName 和 fieldValue，因为我不想为我的状态中的每个项目创建一个操作。

此外，如果您能全神贯注，这会改变状态属性中的一个对象

case addItemToWishList: {
  return {
    ...state,
    buyer: {
      ...state.buyer,
      wishlist: action.data
    }
  };
}

Redux-form 6.0+ 更改所有字段值

Redux-form 6.0+ change all field values

javascript

reactjs

redux

redux-form