Redux状态变量显示为未定义

debugcn 发表于 Dev

Lakshay dutta

我正在使用React和redux制作应用程序。我正在努力实现“主页”检查auth的功能，如果auth为“ false”，它将重定向到“ auth-page”。这就是我试图实现上述功能的方式。

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import "./css/index.css";
import AppScreen from "./screens/appscreen";
import NotFoundScreen from "./screens/notfoundscreen";
import AuthScreen from "./screens/authscreen";

import isLoggedInReducer from "./redux/reducers/isLoggedInReducer";

ReactDOM.render(
    <Provider store={createStore(isLoggedInReducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() )}>
      <Router>
        <Switch>
          <Route path="/" exact>
            <AppScreen />
          </Route>
          <Route path="/auth">
            <AuthScreen />
          </Route>
          <Route path="*">
            <NotFoundScreen />
          </Route>
        </Switch>
      </Router>
    </Provider>,
  document.getElementById("root")
);

isLoggedIn减速器

const isLoggedInReducer = (isLoggedIn = true , action) => {
    switch(action.type){
        case 'LOG_IN':
            return true
        case 'LOG_OUT':
            return false
        default:
            return false
    }
}

export default isLoggedInReducer

主应用

import React from "react";
import { useSelector } from "react-redux";
import { Redirect } from "react-router";

import BottomBar from "../components/bottombar";
import Content from "../components/content";
import NavBar from "../components/navbar";

import "../css/screens/appscreen.css";

const AppScreen = () => {
  let isLoggedIn = useSelector((state) => {
    console.log(state)
    return state
  });
  // the value isLoggedIn is undefined here
  return isLoggedIn ? (
    <>
      <div className="appscreen">
        <NavBar />
        <Content />
        <BottomBar />
      </div>
    </>
  ) : (
    <>
      <Redirect to="/auth" push />
    </>
  );
};

export default AppScreen;

我试图使用useSelector钩子从存储中读取值。但是变量未定义。它没有显示在redux开发工具中，也不存在。我目前仅尝试从我想添加的变量中读取值，但目前不尝试更改该变量的值。

这是我第一次使用redux，将这么多样板代码包装起来已经有些混乱了。感谢您的宝贵时间！

阿姆加尔·阿卜杜勒·卡里姆

首先，问题出在isLoggedInReducer函数中，您应该了解Reducers，Reducers是将当前状态和操作作为参数并返回新状态结果的函数。换句话说，（状态，操作）=> newState。所以您应该定义一个initialState并将其传递给isLoggedInReducer函数，如下所示：

传递给reducer函数的state参数必须是应用程序的当前状态。在这种情况下，我们称其为initialState，因为它将是第一个（和当前）状态，并且在它之前没有任何东西。

const initialState = { isLoggedIn : true };
const isLoggedInReducer = (state = initialState , action) => {
switch(action.type){
    case 'LOG_IN':
        return {...state ,  isLoggedIn : true };
    case 'LOG_OUT':
        return { ...state , isLoggedIn : false };
    default:
        return state;
  }
}

export default isLoggedInReducer;

您可以检查此链接以获取有关Reducer的更多信息：https : //redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers#writing-reducers

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。