My code can't load initial state of reducer

Question

I just learned redux and I'm trying to use it. I think I made store and reducer well but it doesn't work. My target code can't load initialized state of reducer.

these are reducer file and combinereducer

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


const rootRudcer = combineReducers(
  {
    goodsReducer
  }
)

export default rootRudcer;

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

const initialState = {
  goods : 100
}

const goodsReducer = (state = initialState, action) => {
  switch(state.type) {
    case "ADD" :
      return {
        ...state,
        goods : state.goods+1
      }
    default :
      return {
        state
      }  
  }
}

export default goodsReducer;

and this is the code where reducer is used. I thought {number} would show the initialized number 100. But it doesn't show anything. How can it show number well??

import React from 'react';
import "../section3.css";
import {FaCartArrowDown} from 'react-icons/fa';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';

function Section3Top() {

const dispatch = useDispatch();

const {number} = useSelector(state => state.goodsReducer);

  return (
    <div id='Section3Top'>
      인프런에서 연봉을 올리세요
      <button >
        <FaCartArrowDown size='12'/> 
      </button>
      <span>
        {/* this is the part where I want to chage number */}
        담은 숫자 : {number}
      </span>
    </div>
  )
}

export default Section3Top

Answer 1

change your this code:

const {number} = useSelector(state => state.goodsReducer);

to this:

const number = useSelector(state => state.goodsReducer.goods);