如何在浏览器中完整加载Redux Toolkit（无需npm）及排查函数未定义问题

核心问题 #

你遇到的函数未定义错误，根源有两个：

1. Redux Toolkit的UMD包暴露的全局变量不是RTK，而是ReduxToolkit
2. useDispatch、useSelector、Provider属于React-Redux的React绑定工具，并不包含在Redux Toolkit包里，需要单独引入React-Redux的UMD脚本

修复步骤 #

1. 添加React-Redux的UMD脚本引用
2. 修正全局变量的解构逻辑，从正确的全局对象中获取对应API

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Your App</title>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <!-- 新增React-Redux的UMD脚本 -->
    <script src="https://unpkg.com/react-redux@8/umd/react-redux.development.js" crossorigin></script>
    <script src="https://unpkg.com/@reduxjs/toolkit@1.9.3/dist/redux-toolkit.umd.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      const { useState } = React;
      // 从ReduxToolkit解构RTK核心API，从ReactRedux解构React绑定API
      const { configureStore, createSlice } = ReduxToolkit;
      const { useDispatch, useSelector, Provider } = ReactRedux;

      const counterSlice = createSlice({
        name: 'counter',
        initialState: 0,
        reducers: {
          increment: (state) => state + 1,
          decrement: (state) => state - 1
        }
      });

      const store = configureStore({
        reducer: counterSlice.reducer
      });

      function Counter() {
        const counter = useSelector((state) => state);
        const dispatch = useDispatch();

        return (
          <div>
            <h1>Counter: {counter}</h1>
            <button onClick={() => dispatch(counterSlice.actions.increment())}>
              Increment
            </button>
            <button onClick={() => dispatch(counterSlice.actions.decrement())}>
              Decrement
            </button>
          </div>
        );
      }

      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);
      root.render(
        <Provider store={store}>
          <Counter />
        </Provider>
      )
    </script>
  </body>
</html>

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