使用React Redux Toolkit处理表单多输入并提交存至Redux Store

你的初始实现思路是合理的，本地用useState维护输入状态、仅提交时同步到Redux store的做法，可以避免输入过程中频繁触发store更新和关联组件重渲染，只需要修正两处代码错误即可正常运行：

1. 组件提交逻辑修改 #

你定义的setUser是需要接收表单数据作为入参的action生成函数，提交时需要把本地维护的user对象作为参数传入，修改handleSubmit逻辑：

const handleSubmit = (e) => {
  e.preventDefault();
  // 把本地的user对象作为payload传给action
  dispatch(setUser(user));
};

2. slice代码修改 #

import { createSlice } from "@reduxjs/toolkit";

export const userSlice = createSlice({
  name: "user",
  initialState: {
    length: null,
    width: null
  },
  reducers: {
    setUser: (state, action) => {
      // 初始state没有外层user字段，直接修改对应属性即可
      state.length = action.payload.length;
      state.width = action.payload.width;
    }
  }
});

// 移除多余的user导出，actions中只有你定义的setUser方法
export const { setUser } = userSlice.actions;
export const selectUser = (state) => state.user;
export default userSlice.reducer;

内容的提问来源于stack exchange，提问作者oldskool123