Trying to retrieve store state in react redux using hooks-CodePudding

I am currently building the login functionality of my react project. For it I'm using react-redux. The login part works perfectly for me and does exactly what I want it to do. But when I'm trying to retrieve the state of the store with useSelector() where the API response should be stored in it keeps giving me the following error:

Property 'auth' does not exist on type 'DefaultRootState'.

I was trying different peoples code out from GitHub and followed each step they took so it was really confusing when I got an error while having the same code.

const { user: currentUser } = useSelector((state) => state.auth);

AuthService.js -> authenticate():

return axios.post("/api/Auth/Authenticate", model)
            .then(userResponse => {
                console.log(userResponse);
                
                if (userResponse.data) {
                    // Store user object in localstorage
                    localStorage.setItem("user", JSON.stringify(userResponse.data));
                }

                return userResponse.data;
            }
        );

auth.action.js -> authenticate():

export const authenticate = (model) => (dispatch) => {
    return AuthService.authenticate(model).then(data => {
        dispatch({
            type: ACTION.LOGIN_SUCCESS,
            payload: { user: data }
        });

        return Promise.resolve();
    }, error => {
        dispatch({
            type: ACTION.LOGIN_FAIL
        });

        dispatch({
            type: ACTION.SET_MESSAGE,
            payload: "LOGIN FAILED!"
        });

        return Promise.reject();
    });
};

auth.reducer.js:

const user = 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 ACTION.REGISTER_SUCCESS:
            return {
                ...state,
                isLoggedIn: false
            };
        case ACTION.REGISTER_FAIL:
            return {
                ...state,
                isLoggedIn: false,
            };
        case ACTION.LOGIN_SUCCESS:
            return {
                ...state,
                isLoggedIn: true,
                user: payload.user,
            };
        case ACTION.LOGIN_FAIL:
            return {
                ...state,
                isLoggedIn: false,
                user: null,
            };
        case ACTION.LOGOUT:
            return {
                ...state,
                isLoggedIn: false,
                user: null,
            };
        default:
            return state;
    }
}

root reducer:

import { combineReducers } from "redux";
import authReducer from "./auth.reducer";

export default combineReducers({
    authReducer
});

auth.store.js:

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import rootReducer from "../Reducers";

const middleware = [thunk];

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

Help would really appreciated.

CodePudding user response：

You are passing the reducer as the name of the property on the store when you combine the reducers (see docs):

export default combineReducers({
    authReducer
});

This means that your store is { authReducer: {...authState} }.

Use auth as the key name, and assign the reducer to the property:

export default combineReducers({
    auth: authReducer
});