React Redux购物车添加按钮点击时Redux-logger无Action输出问题

以下是几个常见的排查方向和解决方法：

• 确认添加购物车按钮正确触发了dispatch
  检查组件中点击按钮的逻辑，确保你调用了Redux的dispatch方法来触发Action。比如函数组件里要正确使用useDispatch：

  import { useDispatch } from 'react-redux';
  import { addToCart } from './cart/cart.actions';
  
  const CartButton = ({ item }) => {
    const dispatch = useDispatch();
    const handleAddToCart = () => {
      // 必须调用dispatch来触发Action
      dispatch(addToCart(item));
    };
  
    return <button onClick={handleAddToCart}>添加到购物车</button>;
  };
  

  类组件则需要通过connect把dispatch映射到props中，确保点击时调用this.props.dispatch(addToCart(item))。

• 检查Action创建函数的格式
  你的Action必须包含type字段，这是Redux识别Action的必要条件。确认你的添加购物车Action creator是这样定义的：

  // cart.actions.js
  export const addToCart = (product) => ({
    type: 'ADD_TO_CART', // 必须有type字段
    payload: product
  });
  

  如果使用Redux Toolkit，要确保通过createSlice或createAction正确生成Action。

• 验证Store是否正确注入到应用根组件
  必须用react-redux的Provider组件包裹你的根组件，并传入store，否则组件无法连接到Redux store，dispatch的Action也不会被中间件捕获。示例：

  // index.js
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import { Provider } from 'react-redux';
  import store from './store';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <Provider store={store}> {/* 必须注入store */}
      <App />
    </Provider>
  );
  

• 检查rootReducer是否正确组合了购物车Reducer
  确认你的root-reducer.js中通过combineReducers包含了购物车相关的reducer，虽然这不会影响logger捕获Action，但如果reducer没正确注册，Action的状态变更也不会生效：

  // root-reducer.js
  import { combineReducers } from 'redux';
  import cartReducer from './cart/cart.reducer';
  
  const rootReducer = combineReducers({
    cart: cartReducer // 注册购物车reducer
  });
  
  export default rootReducer;
  

• 确认redux-logger与Redux版本兼容
  你使用的是Redux的legacy_createStore（v4.x版本），确保安装的redux-logger版本和它兼容。可以重新安装最新版的redux-logger：

  npm install redux-logger --save
  

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