Я пытаюсь получить доступ к изображению камеры из одного файла с редукцией, чтобы реагировать на файл. Этот код взят из «https://www.papareact.com/». Я новичок в редуксе и застрял здесь. Это файл редукса cameraSlice.js, в который я записываю изображение и сохраняю его.

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;

Это webcamCapture.js, где захваченное изображение отправляется на другой URL-адрес (предварительный просмотр)

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;

и в конце я получаю доступ к функции cameraSlice.js selectCameraImage в 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;

но как только я нажимаю кнопку камеры, он перенаправляет на страницу предварительного просмотра, но выдает ошибку

Невозможно прочитать свойства undefined (чтение «значение») TypeError: Не удается прочитать свойства неопределенного (чтение «значение»)... . Пожалуйста помоги.

Я снимал изображение с помощью реактивной веб-камеры. Я должен был отобразить изображение, снятое в следующей навигации (Preview).

🤔 А знаете ли вы, что...
React поддерживает однонаправленный поток данных (unidirectional data flow) для предсказуемого управления состоянием.