Как работать с асинхронными функциями в reducer redux?

Question

[kfedor]

Имею следующий код:

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

export const canvasSlice = createSlice({
  name: 'canvas',
  initialState: {
    canvas: null,
    undoList: [],
    redoList: [],
  },
  reducers: {
    setCanvas: (state, action) => {
      state.canvas = action.payload;
    },
    pushToUndo: (state, action) => {
      state.undoList.push(action.payload);
    },
    pushToRedo: (state, action) => {
      state.redoList.push(action.payload);

    },
    undo: (state) => {
      const ctx = state.canvas.getContext('2d');
      if (state.undoList.length) {
        const dataURL = state.undoList.pop();
        state.redoList.push(dataURL);
        const img = new Image();
        img.src = dataURL;
        img.onload = () => {
          ctx.clearRect(0, 0, state.canvas.width, state.canvas.height);
          ctx.drawImage(img, 0, 0, state.canvas.width, state.canvas.height);
        };
      } else {
        ctx.clearRect(0, 0, state.canvas.width, state.canvas.height);
        console.log('Нет элементов для отката');
      }
    },
    redo: (state) => {
      const ctx = state.canvas.getContext('2d');
      if (state.redoList.length) {
        const dataURL = state.redoList.pop();
        state.undoList.push(state.canvas.toDataURL());
        const img = new Image();
        img.src = dataURL;
        img.onload = () => {
          ctx.clearRect(0, 0, state.canvas.width, state.canvas.height);
          ctx.drawImage(img, 0, 0, state.canvas.width, state.canvas.height);
        };
      }
    },
  },
});

export const { setCanvas, pushToUndo, pushToRedo, undo, redo } = canvasSlice.actions;

export default canvasSlice.reducer;

При выполнении кода на строках с ctx.clearRect и ctx.drawImage появляется ошибка:

Uncaught TypeError: Cannot perform 'get' on a proxy that has been revoked
    at img.onload

Почему это происходит, как можно исправить?

Answer 1

[Артем]

Проблема заключается в том, что асинхронная функция img.onload выполняется после того, как функция-редюсер закончила свою работу, и к моменту выполнения img.onload объект state.canvas уже был обновлен и утрачен свою возможность использования. Это приводит к ошибке, которую вы видите.

Для решения этой проблемы можно воспользоваться библиотекой Redux-Thunk, которая позволяет создавать асинхронные функции внутри функций-редюсеров. В вашем случае, вы можете заменить pushToUndo и pushToRedo на асинхронные функции, которые будут использовать dispatch для вызова функций-редюсеров после завершения асинхронной операции.

Пример использования Redux-Thunk для вашего случая:

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

export const loadImage = createAsyncThunk(
  'canvas/loadImage',
  async (dataURL, { getState }) => {
    const state = getState().canvas;
    const img = new Image();
    img.src = dataURL;
    return new Promise((resolve, reject) => {
      img.onload = () => {
        const ctx = state.canvas.getContext('2d');
        ctx.clearRect(0, 0, state.canvas.width, state.canvas.height);
        ctx.drawImage(img, 0, 0, state.canvas.width, state.canvas.height);
        resolve();
      };
      img.onerror = reject;
    });
  }
);

export const canvasSlice = createSlice({
  name: 'canvas',
  initialState: {
    canvas: null,
    undoList: [],
    redoList: [],
  },
  reducers: {
    setCanvas: (state, action) => {
      state.canvas = action.payload;
    },
    pushToUndo: (state, action) => {
      state.undoList.push(action.payload);
    },
    pushToRedo: (state, action) => {
      state.redoList.push(action.payload);
    },
    undo: (state) => {
      if (state.undoList.length) {
        const dataURL = state.undoList.pop();
        state.redoList.push(dataURL);
        dispatch(loadImage(dataURL));
      } else {
        console.log('Нет элементов для отката');
      }
    },
    redo: (state) => {
      if (state.redoList.length) {
        const dataURL = state.redoList.pop();
        state.undoList.push(state.canvas.toDataURL());
        dispatch(loadImage(dataURL));
      }
    },
  },
  extraReducers: (builder) => {
    builder.addCase(loadImage.pending, (state) => {
      // обработка начала загрузки изображения
    });
    builder.addCase(loadImage.fulfilled, (state) => {
      // обработка завершения загрузки изображения
    });
    builder.addCase(loadImage.rejected, (state) => {
      // обработка ошибки загрузки изображения
    });
  },
});

export const { setCanvas, pushToUndo, pushToRedo, undo, redo } = canvasSlice.actions;

export default canvasSlice.reducer

Comments

[kfedor]

Спасибо. Я пробовал еще решить проблему таким способом. Сделал редюсер асинхронным и вместо img.onload() использовал await img.decode():

undo: async (state) => {
      const ctx = state.canvas.getContext('2d');
      if (state.undoList.length) {
        const dataURL = state.undoList.pop();
        state.redoList.push(dataURL);
        const img = new Image();
        img.src = dataURL;
        await img.decode();
        console.log(img);
        ctx.clearRect(0, 0, state.canvas.width, state.canvas.height);
        ctx.drawImage(img, 0, 0, state.canvas.width, state.canvas.height);
      } else {
        ctx.clearRect(0, 0, state.canvas.width, state.canvas.height);
        console.log('Нет элементов для отката');
      }
    }

это срабатывает 1 раз, а затем выскакивает ошибка

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getContext')

Не подскажете, почему так происходит?

[kfedor]

и еще один вопрос касательно вашего ответа: мы же не можем использовать dispatch так. выдает ошибку:

React Hook "useDispatch" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function

[Артем]

kfedor,
Ошибка "Cannot read properties of undefined (reading 'getContext')" возникает потому, что свойство "canvas" в состоянии "state" становится "null" после первого вызова функции "undo". Вероятно, это происходит из-за того, что вы удаляете элемент из массива "undoList" в строке "const dataURL = state.undoList.pop();" и, возможно, что-то идет не так с асинхронной загрузкой изображения.

Вам следует убедиться, что "canvas" всегда существует и что изображение было загружено успешно, прежде чем использовать "ctx" для выполнения действий на холсте. Вы можете использовать обработку исключений для перехвата ошибок при загрузке изображения, например, так

undo: async (state) => {
  const { canvas, undoList, redoList } = state;
  if (undoList.length && canvas) {
    const dataURL = undoList.pop();
    redoList.push(dataURL);
    const img = new Image();
    img.src = dataURL;
    await img.decode();
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  } else if (canvas) {
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    console.log('Нет элементов для отката');
  } else {
    console.log('canvas is null');
  }
}

Этот код проверяет наличие canvas и только тогда вызывает метод getContext. Если canvas не существует, то функция просто выведет сообщение об ошибке в консоль

[Артем]

kfedor, Да, вы правы. Я по ошибке подумал, что вы используете хуки в React компоненте, но вам необходимо использовать useDispatch внутри React компонента или функционального компонента, который использует хуки.

Если вы используете классовый компонент, то вы можете получить доступ к dispatch через connect функцию из библиотеки react-redux, например:

import { connect } from 'react-redux';
import { undo } from './canvasSlice';

class MyComponent extends React.Component {
  handleClick = () => {
    this.props.undo();
  }

  render() {
    return (
      <button onClick={this.handleClick}>Undo</button>
    );
  }
}

export default connect(null, { undo })(MyComponent)

Здесь мы используем connect для связи компонента с Redux хранилищем и передаем undo функцию из нашего slice как пропс.

Если вы используете функциональный компонент, вы можете использовать хук useDispatch следующим образом

import { useDispatch } from 'react-redux';
import { undo } from './canvasSlice';

function MyComponent() {
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch(undo());
  }

  return (
    <button onClick={handleClick}>Undo</button>
  );
}

export default MyComponent

Здесь мы используем useDispatch хук для получения функции dispatch и вызываем dispatch с undo action creator из нашего slice

[kfedor]

А можно еще вопрос? =)
Выяснил, что
const dataURL = state.redoList.pop();

ломает программу. Т.е. до этой строки console.log выводится и все выполняется, а после - нет. Почему pop() может не работать?