尝试使用钩子在 react redux 中检索存储状态

Question

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

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

我正在尝试使用 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

当您组合减速器时，您正在将减速器作为商店中属性的名称传递（参见 docs）：

export default combineReducers({
    authReducer
});

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

使用auth作为键名，将reducer赋值给属性:

export default combineReducers({
    auth: authReducer
});

尝试使用钩子在 react redux 中检索存储状态

Trying to retrieve store state in react redux using hooks

javascript

reactjs

redux

react-redux

react-hooks