reactjs - 我们可以重定向到 reduxSaga 吗

标签 reactjs redux react-redux redux-saga

我有一个带有 HOC 我传递组件的登录页面,必须在成功登录后呈现。

在这里,如果我检查 isLoggedIn 并在登录的渲染中重定向,那么我会收到错误

err: Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops



传奇.js
           try{//call api
                //put login success
              <Redirect to="/app"/>        
            }

索引.js
          const AuthProfile=requireAuth(App);

           In reactdom
             <Route render={(props)=><AuthProfile  {...props}/>} path="/app"/>  


          import React, { PropTypes } from 'react';  
          import { connect } from 'react-redux';  
          import { push } from 'react-router-redux';
          import { bindActionCreators } from 'redux';

          export default function (ComposedComponent) {  
            class Authenticate extends React.Component {


              componentDidMount() {
                console.log("12ra")
                this._checkAndRedirect();
              }

              componentDidUpdate() {
                this._checkAndRedirect();
              }

              _checkAndRedirect() {
                const { isLoggedIn, redirect } = this.props;

                if (!isLoggedIn) {
                  redirect();
                }
              }

              render() {
                console.log("28ra")
                return (
                  <div>
                    { this.props.isLoggedIn ? <ComposedComponent {...this.props} /> : null }
                  </div>
                );
              }
            }

            const mapStateToProps = (state) => {
              return {
                isLoggedIn:state.signInReducer.isLoggedIn
              };
            };

            const mapDispatchToProps = dispatch => bindActionCreators({
              redirect: () => push('/')
            }, dispatch)

            //Authenticate.propTypes = propTypes

            return connect(
              mapStateToProps, 
              mapDispatchToProps
            )(Authenticate);
          }       

HOC 组件是正确的还是我遗漏了什么?

在传奇中重定向是一种好习惯吗?

任何人都可以请让我知道成功后如何进入应用程序组件我被困在那里请帮助谢谢

更新

传奇.js
       yield put({type:LOGIN_SUCCESS,payload:data})
        yield put(push('/app'))

索引.js

Ex for Page1,Page2 我需要
        <AuthRoute
      exact
      path="/"
      component={Page1}
      redirectTo="/login"
      authenticated={this.props.isLoggegIn}
    />

     <AuthRoute
      exact
      path="/"
      component={Page2}
      redirectTo="/login"
      authenticated={this.props.isLoggegIn}
    />

最佳答案

以下是您可以从 saga 导航的方式:

saga.js

import { push } from 'react-router-redux';
...
// after API call & validate user
yield put(push('/app'));

index.js
 <Route strict exact path='/app' component={App}>
 <AuthRoute
          exact
          path="/"
          component={Yourcomponent}
          redirectTo="/login"
          authenticated={hasAccessToken()}
        />

关于reactjs - 我们可以重定向到 reduxSaga 吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56184152/

相关文章:

javascript - .map() 在 render 函数之外工作,但在 render 内部使用时失败

javascript - 在我的例子中,如何只使用一次 react hook useEffect?

reactjs - Redux Thunk 和 Redux Saga 有什么区别?

reactjs - 无法在 React-Redux 应用程序中调用另一个操作

javascript - Thunk Action 主体未被调用

reactjs - 当我将 Flex=1 设置为最顶层 View 时,FlatList 不可见

javascript - 切换播放/暂停以响应音频

javascript - 图像上设置的旋转动画在 react native 中不起作用

javascript - React+Redux 中数据更改时更新状态

javascript - 当我将对象作为 Prop 传递给子组件时如何避免重新渲染?