Redux-toolkit, React - Cannot assign to read only property '0' of object

Question

I have found no answer, which brought a solution. The error is thrown in the const sorted of my child component. I tried to give the destructured array "videos" into an extra const, but that not works. Thanks for your help

Here is the snippet from my child-component:

const VideoSlider = ({state}) => {
    const sorted = state.sort((a,b)=>(a.clicked < b.clicked) ? 1 : -1);
    const [slideIndex, setSlideIndex] = useState(0);
    const handleClick = (direction)=>{
       if(direction === "left"){
           setSlideIndex(slideIndex > 0 ? slideIndex-1 : 0);
       }
       else{
           setSlideIndex(slideIndex < sorted.length - 4 ? slideIndex + 1 : sorted.length - 4);
       }
    }

Here is the snippet from my parent component:

const MostSeen = () => {
const {videos} = useSelector((state)=>state.videos);
const dispatch = useDispatch();
useEffect(()=>{
    dispatch(getAllVideos());
}, [dispatch]);
const stateVideos = videos;
  return (
    <Container>
        <TitleHolder>
            <Title>Most viewed videos</Title>
        </TitleHolder>
        <ContentHolder>
            <VideoSlider state={stateVideos}/>
        </ContentHolder>
    </Container>
  )
}

Roman · Accepted Answer · 2022-04-26 13:20:29Z

2

I have found the solution by myself. It must be:

const stateVideos = [...videos];

answered Apr 26, 2022 at 13:20

Roman

1453 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manil Malla · Accepted Answer · 2022-08-26 12:20:49Z

Apparently assigning a redux state to a var (or const) like

const reduxData = useSelector(state => state.user.data);

or

const reduxData = useSelector(state => state.user.data);
const newConst = reduxData;

quite literally assigns the entire state to the var (or const). So when we try to sort and assign new data to the var (or const), we get the above error since we need to use dispatch to update a redux state. However using the spread operator we can just assign the value of the state to a var (or const).

const FlightSummary = () => {
  const reduxData = useSelector(state => state.user.data);
  var useableData = [...reduxData];
  useableData.sort((a, b) => {
    return a.date < b.date;
  });

  return(...);
}

Amir Baum · Accepted Answer · 2024-04-09 08:08:16Z

0

Redux data is immutable as explained here

When you did this:

const {videos} = useSelector((state)=>state.videos);

and then on the child component you did this:

const sorted = state.sort((a,b)=>(a.clicked < b.clicked) ? 1 : -1);

where state is actually the reference to videos

By sorting the redux data you are mutating it (sort does sorting inline), therefore the solution for this is cloning the data like this:

const stateVideos = [...videos];

or in the child component you can do something like this:

const sorted = state.slice().sort((a,b)=>(a.clicked < b.clicked) ? 1 : -1);

answered Apr 9, 2024 at 8:08

Amir Baum

253 bronze badges

Collectives™ on Stack Overflow

Redux-toolkit, React - Cannot assign to read only property '0' of object

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related