Реагировать на проблему с Redux

Question

Я учусь реагировать и избыточно и пытаюсь реализовать вход в систему ..

ниже моя маршрутизация

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Login from './components/Login/Login'
import Home from './components/Home/Home'
import store from './store/store'
import {Provider}  from 'react-redux';
import history from './history/history';
import {Router,Route,Switch,Redirect} from 'react-router-dom'
import {connect} from 'react-redux'

class App extends Component {
  render() {
    let storelogginState=store.getState();
    let logginState=storelogginState.loginReducer.loggedIn
    console.log('store',logginState)
    return (
      <Router history={history}>
        <div className="App">
          <Provider store={store}>
            <Switch>
                <Route exact path="/" component={Login}/>
                <Route exact path="/home"  render={()=>(
                  this.props.loginReducer.loggedIn?(<Home/>):(<Redirect to="/"/>)
              )  }/>
            </Switch>
          </Provider>
        </div>
      </Router>

    );
  }
}

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

return (dispatch)=>{
    fetch('./data.json').then(response=>response.json()).then((data)=>{
        console.log('data'+data)
         history.push('/home')
        return dispatch(loginSuccess());
    })
  }
}

function loginSuccess(){
  return {
    type:'success',
     loginData:''
  }
}

и ниже мой редуктор

const initalState={
  loggedIn:false
}
 function loginReducer(state=initalState,action){
  switch (action.type) {
    case 'success':
        return Object.assign({},state,{loggedIn:true});
      break;
    default:
    return  state;

  }

}

Итак, мой вопрос в Router

<Route exact path="/home"  render={()=>(
                  logginState?(<Home/>):(<Redirect to="/"/>)
              )  }/>

logginState всегда false , но в состоянии егопоказывая true после успешного входа в систему из-за того, что я могу перейти на домашнюю страницу, но она перенаправляет меня обратно на страницу входа.

Спасибо

Answer 1

Он перенаправляет вас на /, потому что до того, как fetch вернет ответ, маршрут уже сработал с loggedIn: false (кстати, я полагаю, вы правильно извлекаете loggedIn из состояния).Вам нужно отложить рендеринг маршрутов, возможно, сохранив другое значение в хранилище, например:

редуктор

const initalState = {
  hasFinishedAuthorization: false,
  loggedIn: false
};
function loginReducer(state = initalState, action) {
  switch (action.type) {
    case "success":
      return Object.assign({}, state, {
        loggedIn: true,
        hasFinishedAuthorization: true
      });
      break;
    default:
      return state;
  }
}

компонент

{hasFinishedAuthorization &&
  <Switch>
    <Route 
      exact 
      path="/home"  
      render={()=>(logginState?(<Home/>):(<Redirect to="/"/>)
   )}/>
  </Switch> 
}

РЕДАКТИРОВАТЬ:

Используйте «Реакция-избыточность» для доступа к вашему состоянию:

import { connect } from "react-redux";

let MyRoutes = ({ loggedIn }) => (
  <Switch>
    <Route exact path="/" component={Login} />
    <Route
      exact
      path="/home"
      render={() => (loggedIn ? <Home /> : <Redirect to="/" />)}
    />
  </Switch>
);

const mapStateToProps = state => ({
  loggedIn: state.loginReducer.loggedIn
});

MyRoutes = connect(mapStateToProps)(MyRoutes);

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <div className="App">
          <Provider store={store}>
            <MyRoutes />
          </Provider>
        </div>
      </Router>
    );
  }
}