Question

我正在使用 React 和 redux 制作应用程序。我正在努力实现“主页”检查身份验证的功能，如果身份验证为“假”，则重定向到“身份验证页面”。这就是我试图实现上述功能的方式。

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，围绕这么多样板代码已经有点令人困惑。我非常感谢您的时间！

Answer 1

首先，问题出在isLoggedInReducer函数上，你应该了解Reducers，Reducers是将当前状态和一个动作作为参数，并返回一个新的状态结果的函数。换句话说，(state, action) => 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

Redux 状态变量显示为未定义

1 个答案: