Как правильно использовать dispatch в useEffect?

Question

[kfedor]

Всем привет.
Пытаюсь установить state компонентов в useEffect, используя React Redux метод dispatch().
Мне нужно, чтобы state canvas'а передавался в dispatch с setTool'ом.

import React, { useRef, useEffect } from 'react';
import './Board.scss';
import { useSelector, useDispatch } from 'react-redux';
import { setCanvas } from '../../store/canvasSlice';
import { setTool } from '../../store/toolSlice';
import Brush from '../../tools/Brush';

export const Board = () => {
  const canvasRef = useRef();
  const canvas = useSelector((state) => state.canvas.canvas);
  const tool = useSelector((state) => state.tool);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(setCanvas(canvasRef.current));
    dispatch(setTool(new Brush(canvas)));
    console.log('canvas from board', canvas);
    console.log('tool', tool);
  }, [dispatch]);

  return <canvas ref={canvasRef} className='board' width={1920} height={1080}></canvas>;
};

При первом обновлении все значения console.log выводят null - стандартные значения state'а.



Если пересохранить измененный код (например, убрать один console.log), то state выводится уже измененный.
Как починить?

Comments

[Lapita12]

import React, { useRef, useEffect } from 'react';
import './Board.scss';
import { useSelector, useDispatch } from 'react-redux';
import { setCanvas } from '../../store/canvasSlice';
import { setTool } from '../../store/toolSlice';
import Brush from '../../tools/Brush';

export const Board = () => {
  const canvasRef = useRef();
  const canvas = useSelector((state) => state.canvas.canvas);
  const tool = useSelector((state) => state.tool);
  const dispatch = useDispatch();
  
  useEffect(() => {
    dispatch(setCanvas(canvasRef.current));
    dispatch(setTool(new Brush(canvas)));
  }, [canvas, dispatch, tool]);

  return <canvas ref={canvasRef} className='board' width={1920} height={1080}></canvas>;
};

[kfedor]

Lapita12, пробовал, не работает. Передаёт начальное значение state - null.

[Lapita12]

kfedor,

Попробуй заменить

=> {
 dispatch(setCanvas(canvasRef.current));
  dispatch(setTool(new Brush(canvas)));
  console.log('canvas from board', canvas);
  console.log('tool', tool);
}, [dispatch]);

На

=> {
  dispatch(setCanvas(canvasRef.current));
}, [dispatch, canvasRef.current]);

useEffect(() => {
  dispatch(setTool(new Brush(canvas)));
}, [dispatch, canvas]);

Ещё добавь в коде это:

canvas = useSelector((state) => state.canvas.canvas || {});
const tool = useSelector((state) => state.tool || {});