Redux reducer初始状态无法加载问题求助

核心问题分析 #

你的代码存在三个关键错误，导致初始状态无法正常渲染：

• Reducer中switch判断的是state.type，但实际应判断**action.type**
• Default分支错误地将state包裹成对象返回，需直接返回原state
• 组件中尝试读取number字段，但Reducer的初始状态定义的是goods字段

修正后的代码 #

1. Reducer文件（counter.js）

export const addNumber = () => {
  return{
    type : 'ADD'
  }
} 

const initialState = {
  goods : 100
}

const goodsReducer = (state = initialState, action) => {
  // 修正：判断action.type而非state.type
  switch(action.type) {
    case "ADD" :
      return {
        ...state,
        goods : state.goods + 1
      }
    // 修正：直接返回原state，不要额外包裹对象
    default :
      return state  
  }
}

export default goodsReducer;

2. 组件文件（Section3Top.js）

import React from 'react';
import "../section3.css";
import {FaCartArrowDown} from 'react-icons/fa';
import { useSelector, useDispatch } from 'react-redux';
// 别忘了导入action creator
import { addNumber } from './counter';

function Section3Top() {
  const dispatch = useDispatch();

  // 修正：读取goods字段而非number
  const { goods } = useSelector(state => state.goodsReducer);

  return (
    <div id='Section3Top'>
      인프런에서 연봉을 올리세요
      {/* 补充：给按钮绑定dispatch动作 */}
      <button onClick={() => dispatch(addNumber())}>
        <FaCartArrowDown size='12'/>
      </button>
      <span>
        담은 숫자 : {goods}
      </span>
    </div>
  )
}

export default Section3Top

3. 可选修正：combineReducers文件拼写优化

虽然不影响功能，但建议修正拼写错误，提升代码规范性：

import { combineReducers } from "redux";
import goodsReducer from "./counter";

// 修正：rootRudcer → rootReducer
const rootReducer = combineReducers({
  goodsReducer
})

export default rootReducer;

效果验证 #

修正后，页面会正常显示初始值100，点击按钮也能正确触发数值递增操作。

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