Connect parts of table state to redux state

Hi, I want to connect e.g. the columnVisibiliyState to my redux state. The "problem" is the onChange functions, that are typed as OnChangeFn<VisibilityState>. I understand that this is basically the same as the useState's setState function. But i cannot figure out how to replicate this function when using a redux store.

Currently I have it like this, but I do not really like the solution much:

  // column visibility
  const columnVisibilityModel = useAppSelector((state) => state.annotatedSegments.columnVisibilityModel);
  const dispatch = useAppDispatch();
  const [cvModel, setCvModel] = useState<MRT_VisibilityState>(columnVisibilityModel);
  useEffect(() => {
    dispatch(AnnotatedSegmentsActions.onColumnVisibilityChange(cvModel));
  }, [cvModel, dispatch]);

  return (
    <MyTable ...
      columnVisibilityModel={columnVisibilityModel}
      onColumnVisibilityChange={setCvModel}
    />

  // column visibility
  const columnVisibilityModel = useAppSelector((state) => state.annotatedSegments.columnVisibilityModel);
  const dispatch = useAppDispatch();
  const [cvModel, setCvModel] = useState<MRT_VisibilityState>(columnVisibilityModel);
  useEffect(() => {
    dispatch(AnnotatedSegmentsActions.onColumnVisibilityChange(cvModel));
  }, [cvModel, dispatch]);

  return (
    <MyTable ...
      columnVisibilityModel={columnVisibilityModel}
      onColumnVisibilityChange={setCvModel}
    />

Please tell me how to correctly connect the table state to redux state.

Thank you!

TanStack•2y ago•

6 replies

urgent-maroon

Connect parts of table state to redux state

  // column visibility
  const columnVisibilityModel = useAppSelector((state) => state.annotatedSegments.columnVisibilityModel);
  const dispatch = useAppDispatch();
  const [cvModel, setCvModel] = useState<MRT_VisibilityState>(columnVisibilityModel);
  useEffect(() => {
    dispatch(AnnotatedSegmentsActions.onColumnVisibilityChange(cvModel));
  }, [cvModel, dispatch]);

  return (
    <MyTable ...
      columnVisibilityModel={columnVisibilityModel}
      onColumnVisibilityChange={setCvModel}
    />

  // column visibility
  const columnVisibilityModel = useAppSelector((state) => state.annotatedSegments.columnVisibilityModel);
  const dispatch = useAppDispatch();
  const [cvModel, setCvModel] = useState<MRT_VisibilityState>(columnVisibilityModel);
  useEffect(() => {
    dispatch(AnnotatedSegmentsActions.onColumnVisibilityChange(cvModel));
  }, [cvModel, dispatch]);

  return (
    <MyTable ...
      columnVisibilityModel={columnVisibilityModel}
      onColumnVisibilityChange={setCvModel}
    />

Please tell me how to correctly connect the table state to redux state.

Thank you!

Connect parts of table state to redux state

Similar Threads

Connect parts of table state to redux state

Similar Threads

Similar Threads

Similar Threads