Redux thunk返回Promise而非解析值，无法调用web3实例的getId方法如何解决？

问题根因 #

web3Loaded是标准的Redux Thunk异步action creator，你直接调用它只会拿到内部返回的async thunk函数，不会直接得到web3实例：

1. Thunk格式的action必须经过Redux的dispatch触发，才会执行内部逻辑
2. 你没有加await接收dispatch异步执行后的返回值，所以拿到的只是未执行的Promise对象

修复步骤 #

1. 组件内引入useDispatch获取dispatch方法 #

在App.jsx头部引入react-redux的useDispatch钩子，组件内部获取dispatch实例：

import { useDispatch } from 'react-redux'

function App() {
  const dispatch = useDispatch()
  // 其余逻辑不变
}

2. 修改调用web3Loaded的逻辑 #

调用的时候先dispatch这个action，再加await接收返回的web3实例：

useEffect(() => {
    const loadBlockchain = async () => {
      if (window.ethereum) {
        try {
          await window.ethereum.enable();
          // 改动点：dispatch action + await执行结果
          const web3 = await dispatch(web3Loaded(window.ethereum));
          console.log("web3", web3); // 此处已为正常web3实例
          const networkId = await web3.eth.net.getId();
          console.log("networkId", networkId);
        } catch (error) {
          console.log(
            "Non-Ethereum browser detected. You should consider trying MetaMask!"
          );
        }
      }
    };
    loadBlockchain();
  }, [dispatch]); // 记得把dispatch加入依赖数组

补充说明 #

Redux Thunk中间件会自动识别dispatch传入的是函数而非普通action对象，会主动执行该函数并透传返回值，async函数返回的Promise经过await后就可以拿到你在thunk内部return的web3实例。
如果你后续多处需要用到web3实例，也可以直接用useSelector从Redux store中对应WEB3_LOADED reducer存储的connection字段取值，无需依赖action的返回值。

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