请求协助排查Redux应用运行报错问题

错误原因及修复步骤 #

1. 缺少Redux和React-Redux的CDN引入 #

你采用HTML+Script标签的运行环境，无法使用ES6的import语句，必须添加对应的CDN脚本才能获取Provider、createStore等方法。在页面<head>中补充以下代码：

<script src="https://unpkg.com/redux@4/dist/redux.min.js"></script>
<script src="https://unpkg.com/react-redux@7/dist/react-redux.min.js"></script>

同时删除<script type="text/babel">内的所有import语句，全局环境下这些方法会挂载到window对象，直接通过Redux.createStore、ReactRedux.Provider这类方式调用即可。

2. 组件变量名不匹配+未声明就使用 #

你定义的组件是小写的counter，但后续连接Redux时误用了大写的Counter，且Counter未提前声明。按照React组件规范，组件名需首字母大写，同时保证变量名一致：

// 修正组件名首字母大写
const Counter = (props) => {
  // 内部逻辑不变
}

连接Redux时需正确引用该组件，同时用const/let声明变量：

const ConnectedCounter = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(Counter);

3. 箭头函数return语句的自动分号问题（ASI） #

你的组件return后直接换行，JavaScript会自动在return后插入分号，导致返回undefined，组件渲染为空。需将JSX与return放在同一行，或用括号包裹JSX：

const Counter = (props) => {
  function handleClick() {
    props.incrementCounter(1);
  }
  
  // 用括号包裹JSX避免ASI问题
  return (
      <div>
        <p>{props.count}</p>
        <button onClick={handleClick}>Increment</button>
      </div>
  );
}

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- 补充Redux和React-Redux的CDN -->
    <script src="https://unpkg.com/redux@4/dist/redux.min.js"></script>
    <script src="https://unpkg.com/react-redux@7/dist/react-redux.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
      function incrementCounter(num) {
          return {
              type: 'INCREMENT',
              num: num
          }
      }
      const initialState  = {
          count: 0
      };
      
      function reducer(state= initialState, action) {
          switch(action.type) {
            case 'INCREMENT': 
              return { count: state.count + action.num  }
            default:
              return state
         }
      }
      
      const Counter = (props) => {
          function handleClick() {
              props.incrementCounter(1);
          }
          
          return (
              <div>
                <p>{props.count}</p>
                <button onClick={handleClick}>Increment</button>
              </div>
          );
      }
      
      function mapStateToProps(state) {
          return {
              count: state.count
          };
      }
      
      const mapDispatchToProps = {
          incrementCounter 
      }
      
      let store = Redux.createStore(reducer);
      
      const ConnectedCounter = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(Counter);
      
      ReactDOM.render(
         <ReactRedux.Provider store={store}>
          <ConnectedCounter/>
         </ReactRedux.Provider>,
        document.getElementById("root")
      );
  </script>
</body>
</html>

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