React useEffect中dispatch Redux后获取默认状态值的问题修复问询

我尝试使用React和React Redux管理canvas与工具状态，在Board组件的useEffect钩子中调用dispatch设置canvas和tool，但控制台打印出的却是默认状态值，请问该如何解决？

现有代码 #

Board组件 #

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>;
};

canvasSlice（toolSlice逻辑类似） #

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;

问题原因与解决方法 #

1. 核心原因：闭包与状态更新的异步性 #

dispatch触发后，Redux状态会同步更新，但组件的canvas、tool变量是来自组件首次渲染的闭包值，不会立即更新。所以在同一个useEffect里dispatch后直接打印，拿到的还是初始的默认值。

另外，创建Brush实例时用了canvas变量（此时还是null），会导致Brush实例初始化错误。

2. 修正代码方案 #

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(() => {
    // 直接使用ref获取的真实DOM元素，此时组件已挂载，ref有值
    const currentCanvas = canvasRef.current;
    dispatch(setCanvas(currentCanvas));
    // 用真实DOM创建Brush实例，避免依赖未更新的Redux状态
    dispatch(setTool(new Brush(currentCanvas)));
    // 这里打印的是闭包中的旧值，属于正常现象
    console.log('闭包中的初始canvas值', canvas);
  }, []);

  // 新增监听状态变化的useEffect，查看更新后的最新值
  useEffect(() => {
    console.log('Redux中更新后的canvas', canvas);
    console.log('Redux中更新后的tool', tool);
  }, [canvas, tool]);

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

3. 关键说明 #

• 初始化Brush时直接用canvasRef.current：组件挂载后ref已指向真实canvas DOM，无需依赖Redux状态，避免初始化错误。
• 新增状态监听useEffect：通过依赖canvas和tool，当Redux状态更新、组件重新渲染时，该钩子会触发，此时打印的就是最新状态值。
• 原useEffect中的打印：是组件首次渲染时的闭包值，并非Redux状态未更新，可通过Redux DevTools直接查看状态是否正确更新。

内容的提问来源于stack exchange，提问作者Fedor Karasev