如何将reducer中写入的状态发送到组件

Posted 2023-02-22

【中文标题】如何将reducer中写入的状态发送到组件

【英文标题】：How to send state written in reducer to component

【发布时间】：2020-11-12 08:27:12

【问题描述】：

我刚开始学习 react-redux。我目前正在创建一个登录页面。我想将写在减速器中的布尔状态发送到我的 const，所以当状态为真时，它将执行代码。但是我发送的状态返回未定义。

这是我的减速器

const initState = 
  error: "",
  loading: false,
  loggedIn: false,
;

const authReducer = (state = initState, action) => 
  switch (action.type) 
    case LOGIN_PENDING:
      return 
        ...state,
        loading: true,
        loggedIn: false,
      ;
    case LOGIN_SUCESS:
      return 
        loading: false,
        loggedIn: true,
        error: "",
      ;
    case LOGIN_ERROR:
      return 
        loading: false,
        loggedIn: false,
        error: action.payload,
      ;
    default:
      return state;
  
;
export default authReducer;

这是我的行动

export function login(userInfo) 
  return (dispatch) => 
    dispatch(loginPending());
    axios
      .post("http://localhost:8000/api/login", 
        userName: userInfo["Club"],
        password: userInfo["ClubPassword"],
      )
      .then((res) => 
        alert("Sucess");
        if (res.data.Result) 
            document.cookie = "token=" + res.data.Token;
            history.push("/");
        
        dispatch(loginSuccess());
      )
      .catch((error) => 
        dispatch(loginError(error.message));
      );
  ;
 

我想知道如何带上我的登录状态并在这条私有路由中使用它

const PrivateRoute = ( component: Component, ...rest ) => (
      <Route
        ...rest
        render=(props) =>
          loggedIn ? <Component ...props />
           : <Redirect to= pathname: '/login', state:  from: props.location   />
        
      />
    )

编辑：我的 index.js 文件是否有任何错误

 import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import  createStore, applyMiddleware  from "redux";
import  composeWithDevTools  from "redux-devtools-extension";
import  Provider  from "react-redux"; // react-redux glues redux to react
import rootReducer from "./Store/Reducers/rootReducer";
import thunk from "redux-thunk";
const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);
ReactDOM.render(
  <Provider store=store>
    /* providing store to the app */
    <App />
  </Provider>,
  document.getElementById("root")
);

【问题讨论】：

您应该使用react-redux.js.org/api/connect 或使用useSelector 挂钩将您的组件连接到redux。

【参考方案1】：

使用 react-redux 中的 useSelector hook 从 Redux 状态获取 loggedIn：

import  useSelector  from 'react-redux'

const PrivateRoute = ( component: Component, ...rest ) => 
  const loggedIn = useSelector(state => state.loggedIn)
  return (
    <Route
      ...rest
      render=(props) =>
        loggedIn ? <Component ...props />
          : <Redirect to= pathname: '/login', state:  from: props.location   />
      
    />
  )

``

【讨论】：

在使用 useSelector 之前是否需要导出任何组件或功能？还是我需要在我的应用程序组件中使用连接（此功能在我的应用程序组件中）。因为我在发布这个问题之前使用了这种方法，它给了我。 错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

另外，当我尝试 console.log 时，它给了我 undefined

如果你在其他地方做import PrivateRoute from "/some/path";，那么是的，这个文件需要为组件做export default。

我的PrivateRoute 在应用组件下的render() 内。所以它不会导出到任何地方或导入

它不应该在另一个 render 函数中。可以拉到文件根目录下。