React useEffect and react-redux dispatch

Question

I'm trying to put canvas and tool state using React and React Redux tools.

I've a few components including this board.jsx:

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);
  }, []);

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

I use dispatch function in useEffect hook and I get (console log) default state values. How can I fix this?

Here is canvasSlice.js content. toolSlice is almost the same:

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

export const canvasSlice = createSlice({
  name: 'canvas',
  initialState: {
    canvas: null,
  },
  reducers: {
    setCanvas: (state, action) => {
      state.canvas = action.payload;
    },
  },
});

export const { setCanvas } = canvasSlice.actions;

export default canvasSlice.reducer;

Answer 1

I passed canvasRef.current into new Brush and that worked well.