add redux

src/components/Common/KilnInfo/Kiln.jsx

@@ -1,31 +1,53 @@
-import React from "react";
-import { useContext } from "react";
+import cls from "./kiln.module.scss";
 import Container from "../../Container";
-// import SocketContext from '../../../store/socket-data-provider';
+import { useSelector } from "react-redux";
+import { stateNameMap } from "../../../store/features/kilnSlice";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+export default function Kiln() {
+  const kilnInfo = useSelector((state) => state.kiln);
+  const dispatch = useDispatch();
+  console.log("state: ", kilnInfo, stateNameMap);
 
+  const infos = Object.keys(kilnInfo).map((key) => ({
+    label: stateNameMap[key],
+    value: kilnInfo[key],
+  }));
 
-import cls from "./kiln.module.scss";
-
-export default function Kiln() {
-  // const ctx = useContext(SocketContext);
-  const ctx = null;
+  useEffect(() => {
+    setTimeout(() => {
+      dispatch({
+        type: "kiln/setKilnInfo",
+        payload: {
+          kilnPressure: "100Pa",
+          waterTemp: "100℃",
+          waterFlow: "100m³/h",
+          waterPressure: "100Pa",
+          combustionAirPressure: "100Pa",
+          topTemp: "100℃",
+          compressedAirPressure: "100Pa",
+          meltTemp: "100℃",
+        },
+      });
+    }, 3000);
+  }, []);
 
-  const infos = [
-    { label: "窑炉压力", value: ctx?.runState?.kilnPressure || "0Pa" },
-    { label: "循环水温度", value: ctx?.runState?.waterTemp || "0℃" },
-    { label: "循环水流量", value: ctx?.runState?.waterFlow || "0㎡/h" },
-    { label: "循环水压力", value: ctx?.runState?.waterPressure || "0Pa" },
-    {
-      label: "助燃风压力",
-      value: ctx?.runState?.combustionAirPressure || "0℃",
-    },
-    { label: "碹顶加权温度", value: ctx?.runState?.topTemp || "0℃" },
-    {
-      label: "压缩气压力",
-      value: ctx?.runState?.compressedAirPressure || "0Pa",
-    },
-    { label: "融化加权温度", value: ctx?.runState?.meltTemp || "0℃" },
-  ];
+  // const infos = [
+  //   { label: "窑炉压力", value: ctx?.runState?.kilnPressure || "0Pa" },
+  //   { label: "循环水温度", value: ctx?.runState?.waterTemp || "0℃" },
+  //   { label: "循环水流量", value: ctx?.runState?.waterFlow || "0㎡/h" },
+  //   { label: "循环水压力", value: ctx?.runState?.waterPressure || "0Pa" },
+  //   {
+  //     label: "助燃风压力",
+  //     value: ctx?.runState?.combustionAirPressure || "0℃",
+  //   },
+  //   { label: "碹顶加权温度", value: ctx?.runState?.topTemp || "0℃" },
+  //   {
+  //     label: "压缩气压力",
+  //     value: ctx?.runState?.compressedAirPressure || "0Pa",
+  //   },
+  //   { label: "融化加权温度", value: ctx?.runState?.meltTemp || "0℃" },
+  // ];
 
   return (
     <Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>

src/store/features/kilnSlice.js

@@ -0,0 +1,38 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const initialState = {
+  kilnPressure: "0Pa",
+  waterTemp: "0℃",
+  waterFlow: "0m³/h",
+  waterPressure: "0Pa",
+  combustionAirPressure: "0Pa",
+  topTemp: "0℃",
+  compressedAirPressure: "0Pa",
+  meltTemp: "0℃",
+};
+
+export const stateNameMap = {
+  kilnPressure: "窑炉压力",
+  waterTemp: "循环水温度",
+  waterFlow: "循环水流量",
+  waterPressure: "循环水压力",
+  combustionAirPressure: "助燃风压力",
+  topTemp: "碹顶加权温度",
+  compressedAirPressure: "压缩气压力",
+  meltTemp: "融化加权温度",
+};
+
+const kilnSlice = createSlice({
+  name: "kiln",
+  initialState,
+  reducers: {
+    setKilnInfo: (state, action) => {
+      Object.keys(action.payload).forEach((key) => {
+        state[key] = action.payload[key];
+      });
+    },
+  },
+});
+
+export default kilnSlice.reducer;
+export const { setKilnInfo } = kilnSlice.actions;

src/store/index.js

@@ -1,8 +1,8 @@
 import { configureStore } from "@reduxjs/toolkit";
-// import counterReducer from '../features/kiln/KilnSlice'
+import kilnReducer from "./features/kilnSlice";
 
 export const store = configureStore({
   reducer: {
-    // counter: counterReducer,
+    kiln: kilnReducer,
   },
 });