Javascript 如何使用一个reducer操作更新多个表单值？

我正在构建一个多步骤表单，并使用react-hook表单和redux工具包

一切正常，但在某些页面上我有多个输入元素（例如目标和高度）

我的当前代码：

const rootSlice = createSlice({
    name: "root",
    initialState: {
      goal: "",
      height: "",
      age: "",
      username: "",
    },
    reducers: {
      chooseGoal: (state, action) => {
        state.goal = action.payload;
      },
      chooseActivityLevel: (state, action) => {
        state.activity_level = action.payload;
      },
      chooseYourAge: (state, action) => {
        state.age = action.payload;
      },
      chooseYourUserName: (state, action) => {
        state.username = action.payload;
      },
    },
  });

  const goal = useSelector((state) => state.goal);
  const { register, handleSubmit } = useForm({
    defaultValues: { goal, activity_level },
  });
  const onSubmit = (data) => {
    dispatch(chooseGoal(data.goal));
    dispatch(chooseActivityLevel(data.activity_level));
  };

我想知道是否可以将多个表单值挂接到一个减速机上，如下所示：

chooseGoalAndHeight: (state, action) => {
        state.goal && state.height = action.payload;
      },
// And dispatch it like this:

dispatch(chooseGoalAndHeight(data.goal, data.height));

---

还可以初始化一个将有一个空字符串的数字输入的表单元素吗？

下面是我如何初始化的方法，我将

initialState

更改为要从表单中添加的对象数组，而不仅仅是一个对象，因为您可能要存储表单数据的多个实例。然后，我将所有的reducer组合成一个reducer，并添加到一个prepare回调中，该回调用于准备

action.payload

，以确保它与

initialState

的对象的格式相同。你可以阅读更多关于

然后，您可以像这样使用reducer，只是按照

initialState

objects结构传入表单的属性

dispatch(submitForm(data.goal, data.activity_level, data.age, data.username));

---

好问题。这是redux世界的三个主要问题之一。看

---

使用具有功能的lib，您可以清楚而漂亮地解决该问题。

将表单数据作为对象传递给操作。@yudhiesh谢谢，我该怎么做？

dispatch(submitForm(data.goal, data.activity_level, data.age, data.username));