如何使用Redux-thunk派发Action并等待组件重新渲染？

我来帮你搞定这个场景的问题！在React+Redux-thunk的开发中，派发Action后Redux会更新状态，但组件重新渲染是异步的——如果直接在dispatch之后执行依赖DOM更新的操作（比如你代码里注释的输入框聚焦），大概率会因为DOM还没更新而失效。结合你的示例代码，我整理了几个实用的解决方案：

先补全你的基础示例代码 #

首先把你给出的片段补全成可运行的完整代码，方便后续演示：

import React from "react";
import { render } from "react-dom";
import { createStore, applyMiddleware } from "redux";
import { Provider, connect } from "react-redux";
import thunk from "redux-thunk";

// Redux Reducer
const disabledReducer = (state = true, action) => {
  return action.type === "TOGGLE" ? !state : state;
};

// 创建带thunk中间件的store
const store = createStore(disabledReducer, applyMiddleware(thunk));

class Button extends React.Component {
  // 创建输入框的ref，用于后续聚焦操作
  inputRef = React.createRef();

  componentDidUpdate(prevProps) {
    // 当disabled状态从true变为false时，执行聚焦
    if (prevProps.disabled !== this.props.disabled && !this.props.disabled) {
      this.inputRef.current.focus();
    }
  }

  // 触发toggle action的方法
  handleToggle = () => {
    this.props.dispatch({ type: "TOGGLE" });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleToggle}>切换输入框状态</button>
        <input 
          ref={this.inputRef} 
          disabled={this.props.disabled} 
          placeholder="状态激活后我会自动聚焦"
        />
      </div>
    );
  }
}

// 连接组件与Redux store
const ConnectedButton = connect(state => ({ disabled: state }))(Button);

// 渲染整个应用
render(
  <Provider store={store}>
    <ConnectedButton />
  </Provider>,
  document.getElementById("root")
);

核心解决方案 #

1. 利用类组件的componentDidUpdate（最稳妥的推荐方案） #

这就是你代码里已经用到的思路——componentDidUpdate会在组件完成重新渲染、DOM更新完毕后触发。我们只需要在这个生命周期钩子中对比前后props的变化，当目标状态（比如disabled）发生预期改变时，执行DOM操作即可。

优势：完全贴合React的生命周期设计，不会出现时序问题，是官方推荐的做法。

2. 函数组件用useEffect（对应类组件的方案） #

如果是用函数组件开发，对应的写法是用useEffect监听props的变化：

import { useEffect, useRef } from 'react';
import { connect } from 'react-redux';

const Button = (props) => {
  const inputRef = useRef(null);

  useEffect(() => {
    // 当disabled变为false时聚焦
    if (!props.disabled) {
      inputRef.current.focus();
    }
  }, [props.disabled]); // 仅当disabled变化时触发

  const handleToggle = () => {
    props.dispatch({ type: 'TOGGLE' });
  };

  return (
    <div>
      <button onClick={handleToggle}>切换输入框状态</button>
      <input ref={inputRef} disabled={props.disabled} />
    </div>
  );
};

const ConnectedButton = connect(state => ({ disabled: state }))(Button);

3. 用ReactDOM.flushSync强制同步更新（适合需要在dispatch后立即执行的场景） #

如果你需要在dispatch的代码块里直接等待DOM更新完成，可以用flushSync把dispatch操作包裹起来，让React同步完成DOM更新：

import { flushSync } from 'react-dom';

// 在类组件的handleToggle里修改：
handleToggle = () => {
  flushSync(() => {
    this.props.dispatch({ type: 'TOGGLE' });
  });
  // 这里DOM已经更新完成，可以直接操作
  this.inputRef.current.focus();
};

4. 兜底方案：setTimeout（不推荐但应急可用） #

因为React的更新属于微任务，用setTimeout把DOM操作放到宏任务队列里，就能等待微任务执行完毕（DOM更新完成）再触发：

handleToggle = () => {
  this.props.dispatch({ type: 'TOGGLE' });
  setTimeout(() => {
    this.inputRef.current.focus();
  }, 0);
};

注意：这个方案依赖浏览器的事件循环，稳定性不如前几种，仅作为应急使用。

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