combineReducer in Redux is nesting the state inside each state item and I don't know why

Question

Building a game in React with Redux and am having issues getting combineReducer to work. It all worked fine while I was passing a single reducer to createStore, then once I tried using combine reducers I started having issues

import React, { useState, useEffect } from "react"; import { useSelector } from "react-redux";

const Hero = () => {

  const heroPosX = useSelector((state) => state.heroPosX);
  const heroPosY = useSelector((state) => state.heroPosY);
  console.log(heroPosX, heroPosY);

• when I log out heroPosX and heroPosY I get an object containing the entire state. The only way to get actual data values is

const heroPosX = useSelector((state) => state.heroPosX.heroPosX);

My index file

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux"; //redux
import { combineReducers, createStore } from "redux"; 

import { keyStates } from "./redux/keyStates";
import { heroPosX, heroPosY } from "./redux/heroPosition";
//combines reducers, to enable use of multiple reducers
const rootReducer = combineReducers({

  heroPosX,
  heroPosY,
});

//redux boilerplate
const store = createStore(
  rootReducer,
  window._REDUX_DEVTOOLS_EXTENSION__ && window._REDUX_DEVTOOLS_EXTENSION__()
);
//redux devtools extension adds redux devtoools to the browser
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  //<Provider> </Provider> is part of redux
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: XXXXXXXXXXXXXX
reportWebVitals();

and my reducer

import { initialState } from "./initialState";

export function heroPosX(state = initialState, action) {
  switch (action.type) {
    case "MOVE_X":
      return { ...state, heroPosX: state.heroPosX + 10 };

    default:
      return state;
  }
}

export function heroPosY(state = initialState, action) {
  switch (action.type) {
    case "MOVE_Y":
      return { ...state, heroPosY: state.heroPosY + 10 };
    default:
      return state;
  }
}

Can anyone see where I am going wrong?

I have tried all sorts of solutions to this, but nothing seems to work.

Answer 1

import { initialState } from "./initialState";

export function heroPosX(state = initialState, action) {
  switch (action.type) {
    case "MOVE_X":
       state + 10 };

    default:
      return state;
  }
}

export function heroPosY(state = initialState, action) {
  switch (action.type) {
    case "MOVE_Y":
      return state + 10;
    default:
      return state;
  }
}

combineReducers already creates the top-level keys. The reducers are scoped to the relevant piece of state.

Also, make sure initialState is not an object but just a value (probably 0?)