Reactjs 如何将减速器中写入的状态发送到组件

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

这是我的减速机

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

我想知道如何把我的状态loggedin和使用它在这个私人路线

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

const PrivateRoute=（{component:component，…rest}）=>(
洛格丁？
: 
}
/>
)

编辑：我的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”导入React；
从“react dom”导入react dom；
从“/App”导入应用程序；
从“redux”导入{createStore，applyMiddleware}；
从“redux devtools扩展”导入{composeWithDevTools}；
从“react redux”导入{Provider}；//react redux胶水redux反应
从“/Store/Reducers/rootReducer”导入rootReducer；
从“redux thunk”导入thunk；
const store=createStore(
减根剂，
带有开发工具的组件（applyMiddleware（thunk））
);
ReactDOM.render(
{/*为应用程序提供存储*/}
,
document.getElementById（“根”）
);

使用from react redux从redux状态获取

loggedIn

：

从'react redux'导入{useSelector}
const privaterout=（{component:component，…rest}）=>{
const loggedIn=useSelector（state=>state.loggedIn）
返回(
洛格丁？
: 
}
/>
)
}
``

您应该使用useSelector钩子或使用useSelector钩子将组件连接到redux。在使用useSelector之前，我是否需要导出任何组件或函数？或者我是否需要在我的应用程序组件中使用connect（此功能在我的应用程序组件中）。因为我在发布这个问题之前使用了这个方法，它给了我一个答案。错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。此外，当我尝试console.log时，如果您在其他位置执行

从“/some/path”导入PrivateRoute，则这会使我无法定义

然后是，此文件需要为组件执行

导出默认值

。my

PrivateRoute

位于App component下的

render（）

内。因此，它不会导出到任何位置或导入。它不应位于另一个

render

函数中。它可以被拉到文件的根目录下。