Реагируйте на редукцию, выход из системы и вход в систему, используя дозу магазина, но не обновляйте страницы.

Question

Хорошо, как в заголовке говорится, что я использую хранилище и редуктор для выхода из системы и входа в систему.

Проблема в том, что при отправке выхода из системы он не обновляет компонент в течение некоторого времени

Вот мой код

пользователь

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)

Что я делаю не так, пожалуйста, помогите мне понять

Answer 1

Проблема в том, что у вас есть два редуктора (userIdLogedIn и userReducer), которые должны быть объединены.

Состояние userIdLogedIn, которое вы используете в компонентах, происходит из:

export function userIdLogedIn() {
    return false;
}

И это состояние отделено от userReducer, в котором происходит отправка.

Вы сможете полностью удалить userIdLoggedIn и использовать состояние userReducer в своих компонентах. например,

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

В сочетании с ответом Нираджа Ч, это должно решить вашу проблему.

Answer 2

Может быть, это было переопределено. Попробуйте это и проверьте.

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