React Redux报错：未调用dispatch时无法读取numberOfCakes属性

我是React和Redux的初学者，正在学习React结合Redux的开发。我在store.js中创建了store，代码如下：

const redux = require("redux");
const createStore = redux.createStore;

const BUY_CAKE = "BUY_CAKE";

function buyCake() {
  return {
    type: BUY_CAKE,
  };
}

const initialState = {
  numberOfCakes: 25,
};

const cakeReducer = (state = initialState, action) => {
  switch (action.type) {
    case BUY_CAKE:
      return {
        ...state,
        numberOfCakes: state.numberOfCakes - 1,
      };
  }
};

const store = createStore(cakeReducer);

store.subscribe(() => {
  console.log("updated State: ", store.getState());
});

// store.dispatch(buyCake());

export { buyCake, store };

我的组件代码如下：

import * as React from "react";
import { Component } from "react";
import { connect } from "react-redux";
import { buyCake } from "./redux/store";

class CakeContainer extends Component {

  constructor(props) {
    super(props);
  }

  render() {
      console.log("props: ", this.props);
    return (
      <div>
        <h2>No of cakes = {this.props.numberOfCakes}</h2>
        <button>Buy Cake</button>
      </div>
    );
  }
}

// take redux state -> retruns an object
const mapStateToProps = (state) => {
  return {
    numberOfCakes: state.numberOfCakes,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    buyCake: () => dispatch(buyCake()),
  };
};


export default connect(mapStateToProps, mapDispatchToProps)(CakeContainer);

当不在store.js中调用至少一次store.dispatch(buyCake())时，会出现错误TypeError: Cannot read properties of undefined (reading 'numberOfCakes')；而调用至少一次该dispatch后，错误就会消失。请问这是什么原因？

原因分析与解决办法 #

问题出在reducer的返回值逻辑上：

• 当创建Redux store时，Redux会自动派发一个INIT类型的初始化action，用来触发reducer初始化store状态。
• 你的cakeReducer里的switch语句只处理了BUY_CAKE类型的action，当遇到INIT这个初始化action时，switch没有匹配到任何case分支，导致reducer没有返回任何值（即返回undefined）。
• 这就使得store的初始状态变成了undefined，当组件通过mapStateToProps尝试访问state.numberOfCakes时，自然会抛出“无法读取undefined的numberOfCakes属性”的错误。
• 而调用一次store.dispatch(buyCake())后，reducer匹配到BUY_CAKE分支，返回了正确的状态对象，store状态被正确赋值，后续组件访问就不会报错了。

解决办法很简单：给reducer的switch添加default分支，返回当前state：

修改cakeReducer代码：

const cakeReducer = (state = initialState, action) => {
  switch (action.type) {
    case BUY_CAKE:
      return {
        ...state,
        numberOfCakes: state.numberOfCakes - 1,
      };
    // 添加default分支，确保任何未匹配的action都返回当前state
    default:
      return state;
  }
};

这样不管是初始化的INIT action，还是其他未定义的action，reducer都会返回当前的state（初始化时就是你定义的initialState），store就能正确拿到初始状态，组件也就不会出现undefined错误了。

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