尝试使用钩子在反应 redux 中检索商店 state

Question

我目前正在构建我的 React 项目的登录功能。 为此，我使用的是 react-redux。登录部分非常适合我，并且完全符合我的要求。 但是，当我尝试使用 useSelector() 检索商店的 state 时，其中应该存储 API 响应的地方一直给我以下错误：

“DefaultRootState”类型上不存在属性“auth”。

我正在尝试从 GitHub 中提取不同的人的代码并遵循他们采取的每一步，所以当我在使用相同的代码时遇到错误时真的很困惑。

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

AuthService.js -> 认证（）：

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 -> 验证（）：

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

根减速器：

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;

帮助将不胜感激。

Answer 1

当您组合减速器时，您将减速器作为商店属性的名称传递（请参阅文档）：

export default combineReducers({
    authReducer
});

这意味着您的商店是{ authReducer: {...authState} } 。

使用auth作为键名，并将 reducer 分配给属性：

export default combineReducers({
    auth: authReducer
});