reactjs - React redux、logout 和 loggin 使用 store 不会更新页面

问题描述

好的，就像标题说的那样，我使用 store 和 reducer 来注销和登录。

问题是当我分派注销时，由于某种原因它不会更新组件

这是我的代码

用户

export function userIdLogedIn() {
    return false;
}


export function userReducer(state, action) {

    console.log(action);
    switch (action.type) {
        case "LOGIN":
            return {
                userIdLogedIn: true,
                ...state
            };
        case "LOGOUT":
            return {
                userIdLogedIn: false,
                ...state
            };
        default:
            return {
                userIdLogedIn: false,
                ...state
            };
    }
}

然后我有 Cominereducer

import { combineReducers } from 'redux'
import favoritsReducer from './Favorits'
import { userIdLogedIn, userReducer} from './User'

const allReducer = combineReducers({
    favorits: favoritsReducer,
    userIdLogedIn: userIdLogedIn,
    userReducer: userReducer
});

export default allReducer;

这是我的应用程序

import * as React from 'react';
import Layout from './components/Layout';
import Home from './components/Home';
import Info from './components/info'
import Search from './components/search'
import Favorit from './components/Favorit'
import * as API from './components/API'
import Login from './components/Login'
import Chapter from './components/Chapter'
import { GoogleLogin, GoogleLogout } from 'react-google-login';
import './custom.css'
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
import { connect } from 'react-redux'
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

class App extends React.Component<({ login: Function, logout: Function, userIdLogedIn: Boolean })> {
    componentDidMount() {
        var ref = this;
        //API.userLogedinAsync().then(x => ref.setState({ userIsLogged: x }));
        console.log(this.props.userIdLogedIn);
    }


    responseGoogle(r) {
        var email = r.profileObj.email;
        var image = r.profileObj.imageUrl;
        API.authAsync(email, image);
        this.props.login();
        //this.setState({ userIdLogged: true });
        //window.location.href = window.location.href;
    }

    async logOut() {
        await API.signOutAsync();
        this.props.logout();
        //this.setState({ userIdLogged: false });
        //window.location.href = window.location.origin;
    }

    render() {

        return <Router>
            <nav>
                <ul className="header">
                    <li className="logo"><Link to="/"> <img src={require("./Images/icon.png")} width="24" /></Link></li>

                    {
                        this.props.userIdLogedIn === false ?
                            <li>
                                <GoogleLogin
                                    clientId="****-akj6ujapgd722u0kqaib2lmca3mu71vt.apps.googleusercontent.com"
                                    buttonText="Login"
                                    render={renderProps => (
                                        <a href="#" onClick={renderProps.onClick}>Login</a>
                                    )}
                                    onSuccess={this.responseGoogle.bind(this)}
                                    isSignedIn={true}
                                    onFailure={this.responseGoogle.bind(this)}
                                />
                            </li> :
                            <li>
                                <GoogleLogout
                                    clientId="*****-akj6ujapgd722u0kqaib2lmca3mu71vt.apps.googleusercontent.com"
                                    buttonText="Logout"
                                    render={renderProps => (
                                        <a href="#" onClick={renderProps.onClick}>Signout</a>
                                    )}
                                    onLogoutSuccess={this.logOut.bind(this)}
                                />

                            </li>
                    }
                    {
                        this.props.userIdLogedIn === true ?
                            <li>
                                <Link to="/favorit">Favorit</Link>
                            </li> : ""
                    }
                    <li>
                        <Link to="/search">Search</Link>
                    </li>
                    <li>
                        <Link to="/">Novels</Link>
                    </li>

                </ul>
            </nav>
            <Layout>
                <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
                <Switch>
                    <Route path="/" exact>
                        <Home />
                    </Route>
                    <Route path="/info" component={Info} />
                    <Route path="/search">
                        <Search />
                    </Route>
                    <Route path="/login">
                        <Login />
                    </Route>
                    <Route path="/favorit" component={Favorit} />
                    <Route path="/chapter" component={Chapter} />
                </Switch>
            </Layout>
        </Router>
    }
};

function mapToProb(state: { userIdLogedIn: boolean }) {
    return {
        userIdLogedIn: state.userIdLogedIn
    }
}

function dispatchToProb(dispatch) {
    return {
        login: () => { dispatch({ type: "LOGIN" }) },
        logout: () => { dispatch({ type: "LOGOUT" }) }
    }
}

export default connect(mapToProb, dispatchToProb)(App)

我在这里做错了什么请帮助我理解

标签： reactjsreact-redux

export function userReducer(state, action) { console.log(action); switch (action.type) { case "LOGIN": return { ...state, <------- userIdLogedIn: true }; case "LOGOUT": return { ...state, <------- userIdLogedIn: false }; default: return { ...state, <------- userIdLogedIn: false }; } }

reactjs - React redux、logout 和 loggin 使用 store 不会更新页面

问题描述

解决方案

推荐阅读