React/Redux How to set value from redux store to state of component

Question

I need to change my received data from redux store to another variable (and then modify it). At the moment, I receive data from store after API call and it is stored offices , but it is not set to my officeData variable. Does anyone how can I solve that?
This is my code:

  const dispatch = useDispatch();
  const offices = useSelector((state) => state.office.offices)
  const [officeData, setOffices] = useState(offices);
  debugger;
  useEffect(()=> {
    dispatch(getOffices());
    setOffices(offices);
    debugger
  }, [dispatch])

Answer 1

If you don't even enter your useEffect i think it's because you give dispatch as a dependency.

Effect are triggered when component mount but also when component update (prop or state). So you could do something like that:

import { useEffect } from "react";

const dispatch = useDispatch();
const offices = useSelector((state) => state.office.offices);
const [officeData, setOffices] = useState(undefined);
const [didMount, setDidmount] = useState(false);

// When component mount, load your Offices data
useEffect(() => {
  if(!didMount){
    dispatch(getOffices());
    setOffices(offices);
  } else {
    setDidmount(true);
  }
});

useEffect(() => {
  if(didMount) {
    // When you update officeData, do your thing
  }
}, [officeData]);

I don't know the behavior of useSelector, but i guess it does not trigger a rendering. Maybe you could have a useEffect with offices as dependency , just be careful not to loop !