Cannot read properties of undefined (reading 'value')...TypeError: Cannot read properties of undefined (reading 'value')

Question

I'm trying to access the camera image from one redux file to react file .This code is from "https://www.papareact.com/" .I'm new to redux and stuck here. This is the cameraSlice.js redux file where I'm capturing the image and storing it .

import { createSlice } from '@reduxjs/toolkit';


export const cameraSlice = createSlice({
  name: 'camera',
  initialState: {
    cameraImage:null,
  },
  // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
    setCameraImage: (state, action) => {
      state.cameraImage += action.payload;
    },
    resetCameraImage: (state) => {
        state.cameraImage =null;
    }
  },
});

export const { setCameraImage, resetCameraImage } = cameraSlice.actions;

// The function below is called a selector and allows us to select a value from
// the state. Selectors can also be defined inline where they're used instead of
// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
export const selectCameraImage= (state) => state.cameraImage.value;

export default cameraSlice.reducer;

This is the webcamCapture.js where it the image that got captured is dispatched to another url (preview)

import React, { useCallback, useRef, useState } from 'react';
import Webcam from 'react-webcam';
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
import { useDispatch } from 'react-redux';
import { setCameraImage } from './features/cameraSlice';
import { useNavigate } from 'react-router-dom';
import './WebcamCapture.css';

const videoConstraints = {
    width: 250,
    height: 400,
    facingMode:"user",
};


function WebcamCapture() {
    const webcamRef=useRef(null);
    const dispatch = useDispatch();
   // BEM naming 
   const navigate = useNavigate() //const history=useHistory(); useHistory is now useNavigate in v6



    //using hook
    const capture = useCallback(()=>{
        const imageSrc = webcamRef.current.getScreenshot(); //generates base64 image
        dispatch(setCameraImage(imageSrc));
        navigate('/preview');
    }, [webcamRef])


  return (
    <div className='webcamCapture'>
    <Webcam
      audio={false}
      height={videoConstraints.height}
      ref={webcamRef}
      screenshotFormat='image/jpeg'
      width={videoConstraints.height}
      videoConstraints={videoConstraints} //object
    />

    <RadioButtonUncheckedIcon
    className='webcamCapture_button'
    onClick={capture}
    fontSize='large'
    />
    </div>
  )
}

export default WebcamCapture;

and at the end I'm accessing the cameraSlice.js function selectCameraImage in Preview.js

import React from 'react';
import './Preview.css';
import { useSelector } from 'react-redux';
import { selectCameraImage } from './features/cameraSlice';

function Preview() {
 const cameraImage= useSelector(selectCameraImage); //pulls image from redux

  return (
    <div className='preview'>
        <h2> This is your preview</h2>
        <img src={cameraImage} alt='' />
    </div>
  );
}

export default Preview;

but as soon as I click on the camera button it redirects to preview page yet gives the error

Cannot read properties of undefined (reading 'value') TypeError: Cannot read properties of undefined (reading 'value').... Please help.

I was capturing image using react-webcam . I was supposed to display the image captured in the next navigation (Preview) navigation.

Answer 1

Problem: It should be accessing the cameraImage property from the state, not state.cameraImage.value

Update the "cameraSlice.js" as this:

export const selectCameraImage = (state) => state.camera.cameraImage;

Also, you need to make below changes in "cameraSlice.js" file.

setCameraImage: (state, action) => {
  state.cameraImage = action.payload;
},

=====================Edit=======================

You can edit the capture variable value in the "Preview" Component, just try to add below dependency in useeffect.

const capture = useCallback(() => {
  const imageSrc = webcamRef.current.getScreenshot(); // generates base64 image
  dispatch(setCameraImage(imageSrc));
  navigate('/preview');
}, [webcamRef, dispatch, navigate]);

And, later on - Console the cameraImage. So, you can get to know it's still undefined or getting values.

const cameraImage = useSelector(selectCameraImage);
console.log(cameraImage);