React-Redux：在 JSX 中访问调度类型

Question

I have a login system with React-Redux and I want to display JSX when a specific dispatch Type is send.
For example when the login system failed the dispatch type is LOGIN_FAIL and I want to display an error message but when the authentication is successful then the dispatch type is LOGIN_SUCCESS and I want to display a success message. I already access the username trough mapStateToProps but I was curious if there is another way trough the dispatch type to do conditional rendering?
Thanks for your advice or tips on that topic.

This is my actions.js:

export const login = (email, password) => async dispatch => {
    const config = {
        headers: {
            'Content-Type': 'application/json'
        }
    };

    const body = JSON.stringify({ email, password });

    try {
        const res = await axios.post(`${process.env.REACT_APP_API_URL}/auth/jwt/create/`, body, config);

        dispatch({
            type: LOGIN_SUCCESS,
            payload: res.data
        });

        dispatch(load_user());
    } catch (err) {
        dispatch({
            type: LOGIN_FAIL
        });
    }
};

Answer 1

When i do user authentication, and i want to conditially render a component. I use React routing dom. This way i can create a PrivateRoute that will render the individual component out and redirect if the user !isAuthenticated. Check this out /

https://blog.bitsrc.io/build-a-login-auth-app-with-mern-stack-part-1-c405048e3669

This is the tutorial that you can clone the git

Private Route:

 import React from "react"; import { Route, Redirect } from "react-router-dom"; import { connect } from "react-redux"; import PropTypes from "prop-types"; const PrivateRoute = ({ component: Component, auth, ...rest }) => ( <Route {...rest} render={props => auth.isAuthenticated === true ? ( <Component {...props} /> ) : ( <Redirect to="/login" /> ) } /> ); PrivateRoute.propTypes = { auth: PropTypes.object.isRequired }; const mapStateToProps = state => ({ auth: state.auth }); export default connect(mapStateToProps)(PrivateRoute);

MAIN APP:

 import React, { Component } from "react"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import jwt_decode from "jwt-decode"; import setAuthToken from "./utils/setAuthToken"; import { setCurrentUser, logoutUser } from "./actions/authActions"; import { Provider } from "react-redux"; import store from "./store"; import Navbar from "./components/layout/Navbar"; import Landing from "./components/layout/Landing"; import Register from "./components/auth/Register"; import Login from "./components/auth/Login"; import PrivateRoute from "./components/private-route/PrivateRoute"; import Dashboard from "./components/dashboard/Dashboard"; import "./App.css"; // Check for token to keep user logged in if (localStorage.jwtToken) { // Set auth token header auth const token = localStorage.jwtToken; setAuthToken(token); // Decode token and get user info and exp const decoded = jwt_decode(token); // Set user and isAuthenticated store.dispatch(setCurrentUser(decoded)); // Check for expired token const currentTime = Date.now() / 1000; // to get in milliseconds if (decoded.exp < currentTime) { // Logout user store.dispatch(logoutUser()); // Redirect to login window.location.href = "./login"; } } class App extends Component { render() { return ( <Provider store={store}> <Router> <div className="App"> <Navbar /> <Route exact path="/" component={Landing} /> <Route exact path="/register" component={Register} /> <Route exact path="/login" component={Login} /> <Switch> <PrivateRoute exact path="/dashboard" component={Dashboard} /> </Switch> </div> </Router> </Provider> ); } } export default App;