withRouter не работает корректно с redux - PullRequest
0 голосов
/ 09 апреля 2019

это мое начальное состояние в authReducer.

const initialState = {
    token:'',
    isLogin:  false,
    error: {}
};
function AuthReducer(state = initialState, action) {
    switch(action.type){
        case AUTH_SUCCESS:
            return sessionStorage.setItem('token',action.payload),{
                ...state,
                isLogin: true,
                token: action.payload,
                error: {}
            };
        case AUTH_FAILED:
            return {
                ...state,
                isLogin: false,
                token: '',
                error: action.payload
            };
            default:
            return state
    }
}
export default AuthReducer;

это мой компонент входа, который работает нормально. пользователь может аутентифицироваться и все работает нормально:

class Login extends Component {
    constructor(props){
        super(props);
        this.state ={
            username: '',
            password: ''
        }
    }
    onSubmit = e => {
        e.preventDefault();

        this.props.login(this.state.username, this.state.password);
    }

    render() {
       .....
        )
    }
}

const mapStateToProps = state => {
    return {
        get: { auth : state.AuthReducer}
    }
}
const mapDispatchToProps = dispatch => {
    return {
        login: (username, password) => {
            return dispatch(login(username, password));
        }
    };
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login));

и мой роутер выглядит примерно так:

class App extends Component {
  constructor(props){
    super(props)
  }
  render() {
    let PrivateRoute = ({ component: ChildComponent, isLogin, ...rest}) => {
      console.log({...rest}, "this is rest")
      return <Route 
      {...rest}
        render={props => {
          if (!isLogin) {
            return <Redirect to="/login" />;
        } else {
          return <ChildComponent {...props} />
        }
      }} />
    }
    return (
      <div>
          <Home />
          <Switch>
          <PrivateRoute path="/" exact isLogin={this.props.auth.isLogin}  component={mainContent} />
          <PrivateRoute path="/posts" isLogin={this.props.auth.isLogin} component={Posts} />
          <Route path="/login"  component={Login} />
        </Switch>
      </div>
    );
  }
}
const mapStateToProps = state => {
  return {
    auth: state.AuthReducer
  }
}
const mapDispatchToProps = dispatch => {
  return {
    getUser: () => {
      return dispatch(getUser());
    }
  };
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

в реакции маршрутизатора, они сказали, что вы должны использовать с маршрутом от реакции-маршрутизатора-dom. моя проблема в том, логин работает нормально. но у меня нет доступа к моим реквизитам в моем privateroute , поэтому когда рендеринг отображает новую страницу, мой isLogin устанавливает значение false. У меня есть идея, что маршрутизатор не знает о моем избыточном или защищенных компонентах, не может знать об изменениях в props.all моего дочернего компонента в моем PrivateRoute связан с response-redux.sry об этом грязном коде.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...