TypeError: state.auth is undefined error since I added redux reducers

Since I have added redux reducers in my combineStore index.reducer file my user details json is no longer appearing in my Redux state (in developer options) and I am getting the below error message which is stopping any of my pages displaying.

How would I go about amended my combineStore to get it working with the new reducers? does it need to be changed to configureStore?

TypeError: state.auth is undefined
mapStateToProps
.../src/App.js:204

  201 | }
  202 | 
  203 | function mapStateToProps(state){
> 204 |     const { user } = state.auth;
  205 |     return {
  206 |         user,
  207 |     };

Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers. index.js:1
Uncaught TypeError: state.auth is undefined
    mapStateToProps App.js:204
    Redux 6
    React 3
    ConnectFunction Redux
    React 19
    js index.js:10
    js main.chunk.js:8926
    Webpack 7

Uncaught TypeError: state.auth is undefined
    mapStateToProps App.js:204

The above error occurred in the <Connect(App)> component:

ConnectFunction@http://localhost:5001/static/js/0.chunk.js:140564:75
Provider@http://localhost:5001/static/js/0.chunk.js:140277:15

Uncaught TypeError: state.auth is undefined
    mapStateToProps App.js:204

index.reducer.js

export default combineReducers({

    // combine the reducers
        reducer: {
                user: userReducer,
                fields: fieldsReducer,
                diveSchool: diveSchoolReducer,
                auth,
                message
        }
});

auth.reducer.js

const user = JSON.parse(localStorage.getItem("user"));

const initialState = user
    ? { isLoggedIn: true, user }
    : { isLoggedIn: false, user: null};

export default function (state = initialState, action){
    const { type, payload } = action;

    switch (type) {
        case successful_reg:
            return {
                ...state,
                isLoggedIn: false,
            };
        case failed_reg:
            return {
                ...state,
                isLoggedIn: false,
            };
        case successful_login:
            return {
                ...state,
                isLoggedIn: true,
                user: payload.user,
            };
        case failed_login:
            return {
                ...state,
                isLoggedIn: false,
                user: null,
            };
        case log_out:
            return {
                ...state,
                isLoggedIn: false,
                user: null,
            };
        default:
            return state;
    }
}

It’s because state.auth doesn’t exist

Yes, you’ve combined all the state into a single object. Except youv’e added an extra level of object nesting. The object has one property with the key reducer, which in turn has all the slices of state nested in it. If this even works, it’s state.reducer.auth you need to access. Or just don’t put another level of objects in there, that’s the correct solution here

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.