Reactjs 如何在react redux中更新我的状态？

当我点击提交按钮时，我想提升我的状态。 这是我的代码：

const [editAreaName, setEditAreaName] = useState("");

function areaNameUpdateSubmit(e, areaId) {
    e.preventDefault();
    props.updateArea(areaId,editAreaName);
  }

  {props.area.map((mekan) => (
                <Tab
                  key={mekan.areaId}
                  eventKey={mekan.areaId}
                  title={mekan.areaName}
                >
                  
                   <form
                    className="alert alert-primary m-5"
                    onSubmit={(e) => areaNameUpdateSubmit(e, mekan.areaId)}
                  >
                    <h1>mekan adı:{mekan.areaName}</h1>
                    <input
                      onChange={(e) => setEditAreaName(e.target.value)}
                    ></input>
                    <button type="submit" className="alert alert-danger">
                      Change area name
                    </button>
                  </form>
))}

这是我的状态类型：

const INITIAL_STATE = {
  area: [
    { areaId: 0, areaName: "Inside" },
    { areaId: 1, areaName: "Garden" },
  ],
  table: [
    { tableId: 0, areaId: 0, tableName: "TABLE 1" },
    { tableId: 1, areaId: 1, tableName: "TABLE 2" },
    { tableId: 2, areaId: 1, tableName: "TABLE 3" },
    { tableId: 3, areaId: 1, tableName: "TABLE 4" },
    { tableId: 4, areaId: 4, tableName: "TABLE 5" },
  ],
};

这是我的减速机。区域状态有一个循环，如果areaId和action.id相等，那么我想更改我的this area对象

  case "UPDATE_AREA":
      return {
        area: state.area.map((area) => {
          if (area.areaId === action.id) {
            return {
              ...area,
              areaName: action.newAreaName,
            };
          }
          return area;
        }),
      };

---

在reducer中访问的动作属性与在动作创建者中传递的不同

---

在减速器中，将

area.areaId

更改为

area.payload.areaId

和

action.newAreaName

更改为

action.payload.newAreaName
此代码可能需要使用
action.payload.id

case "UPDATE_AREA":
  return {
    ...state,
    area: state.area.map((area) => {
      if (area.areaId === action.payload.id) {
        return {
          ...area,
          areaName: action.payload.newAreaName,
        };
      }
      return area;
    }),
  };

case "UPDATE_AREA":
  return {
    ...state,
    area: state.area.map((area) => {
      if (area.areaId === action.payload.id) {
        return {
          ...area,
          areaName: action.payload.newAreaName,
        };
      }
      return area;
    }),
  };