Reactjs 获取更改后的状态值

发布于11月21日

我有一个项目，当状态通过WebSocket更改时，它会将值发送到服务器，我正在使用redux-TOOLKIT，我的状态如下

const initialState = {
  exposure: false,
  whiteBalance: false,
  shutterSpeed: 1,
  iso: 50,
  temperature : 5500,
  tint : 0,
  brightness: { checked: false, value: 0 },
  hue: { checked: false, value: 0 },
  saturation: { checked: false, value: 0 },
  vibrance: { checked: false, value: 0 },
  contrast: { checked: false, value: 0 },
  gamma: { checked: false, value: 0 },
  sharpness: { checked: false, value: 0 },
};

const imageAdjustmentsSlice = createSlice({
  name: "imageAdjustments",
  initialState,
  reducers: {
    changeIso: (state, action: PayloadAction<number>): void => {
      state.iso = action.payload;
    },
    changeTemperature: (state,action: PayloadAction<number>): void => {
      state.temperature = action.payload;
    },
    changeTint: (state,action: PayloadAction<number>): void => {
      state.tint = action.payload;
    },
    // and other reducers
  }
});

const store = configureStore({  
  reducer: {
    imgAdjustments:imageAdjustmentsSlice.reducer,
  },
});

const WSController: React.FC = () => {
      const videoStore = useAppSelector((state) => state.imgAdjustments);
      const { sendMessage } = useWebSocket("ws://localhost:3000");
    
      React.useEffect(() => {
        // i want to send the changed value only not the whole state.
        sendMessage(JSON.stringify(videoStore));
      }, [videoStore ]);

      return <></>
}

当videoStore更改时，我想将更改后的值发送到服务器.我想知道当状态改变时哪个值会改变. 例如，我使用dispatch在某处更改了iso值.我只想得到改变后的ISO值.就像这样:

const changedValue = getChangedValue(state) // returns { iso : 200 }

有没有函数/钩子或其他方法来实现这一点？或者我应该重新配置REDUX？

import { useEffect, useRef } from "react"; // Typical "usePrevious" value hook recipe const usePrevious = (value) => { const ref = useRef(); useEffect(() => { ref.current = value; }); return ref.current; }; const useObjectDiff = (current) => { const previous = usePrevious(current); const diff = {}; if (current && previous) { Object.entries(current).forEach(([key, value]) => { if (previous[key] !== value) { diff[key] = value; } }); } return Object.keys(diff).length ? diff : null; };

const WSController = () => { const videoStore = useAppSelector((state) => state.imgAdjustments); const { sendMessage } = useWebSocket("ws://localhost:3000"); const videoStoreDiff = useObjectDiff(videoStore); React.useEffect(() => { if (videoStoreDiff) { sendMessage(JSON.stringify(videoStore)); } }, [videoStoreDiff]); return ( ... ); }

Reactjs 获取更改后的状态值

推荐答案

Reactjs相关问答推荐

如何在react组件中使用formik进行验证

try 在Dockerfile中使用AWS CLI将React构建工件上传到S3时出错

在下一个js中使用ESTAccountWithEmailAndPassword函数时循环

关于同一位置的不同组件实例的react S规则被视为相同组件

无法在主组件的返回语句中呈现预期组件

GitHub页面配置

更改点几何体的坐标会将其隐藏

在React中使用映射创建flex组件

为什么react日历时间轴项Renderprops 不能与useState挂钩一起使用？

关于forwardRef，我可以'；我不理解第二个用例

React 状态不更新

如何在 React.js 中提取 PDF 的内容？

使用 toast 时挂钩调用无效

使用带有搜索字符串的全局过滤器时如何在 React-Table 中进行精确匹配？

如何避免在 react useEffect 上滚动时出现小的延迟？

从其他组件切换 FieldSet

Cypress ，重试不再附加到 DOM 的元素

如何使用react 路由将 url 参数限制为一组特定的值？

使用 React 中的功能组件更改另一个组件的状态

如何在 React x 中返回组件？