CODEWITHSUNDEEP
reactjsreact-redux
James Gee
James Gee

Reputation: 139

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;
    }
}

Upvotes: 0

Views: 459

Answers (1)

Linda Paiste
Linda Paiste

Reputation: 42208

Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.

Your reducers need to be top-level properties of the object that you pass to combineReducers. Instead you have this property reducer in between which is causing the error.

It needs to be:

export default combineReducers({
  user: userReducer,
  fields: fieldsReducer,
  diveSchool: diveSchoolReducer,
  auth,
  message
});

instead of:

export default combineReducers({
  reducer: {
    user: userReducer,
    fields: fieldsReducer,
    diveSchool: diveSchoolReducer,
    auth,
    message
  }
});

Upvotes: 1

Related Questions