React在成功發佈後重定向

我通常以Java程序員身份工作，並且我非常喜歡這樣一個事實，即使用Java，很多代碼設計都是標準化的。例如，您閱讀關於Spring或Hibernate的Java示例，結構上的代碼在整個世界看起來都是一樣的。React在成功發佈後重定向

我現在正在用Rex和ReactJS一起工作，我似乎無法理解它。我看到的每一個例子都會完全不同，它會像整個JavaScript社區一樣無法彌補如何做同樣的事情，所以我希望這裏有人能夠解釋ReactJS/redux是如何工作的。

我有一個登錄頁面，當我點擊一個按鈕時，必須對oauth2 auth服務器執行http發佈，並且必須完成重定向。

我的組件工作。它是LoginPage，我可以確認，當我點擊登錄按鈕時，一個動作被調用。

class LoginPage extends React.Component { 
    render() { 
    return (
     <div id="login-container"> 
     <LoginForm {...this.props} /> 
     </div> 
    ); 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    return { 
    }; 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    handleSubmit: (evt) => { 
     evt.preventDefault(); 

     performLogin(dispatch, evt.target.username.value, evt.target.password.value); 
    } 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);

的performLogin方法是一個動作，我actions.js看起來是這樣的：

export function performLogin(dispatch, username, password) { 
    login(username, password).then(function (response) { 
     dispatch({ 
      type: LOGIN_SUCCESS 
     }); 
    }) 
    .catch(function (error) { 
     dispatch({ 
      type: LOGIN_FAILURE 
     }); 
    }); 
}

減速機看起來是這樣的：

const loginReducer = (state = initialState, action) => { 
    switch (action.type) { 
     case LOGIN_SUCCESS: 
      return [ 
       ...state, { 
        auth: { 
         'login': true 
        } 
       } 
      ] 
     case LOGIN_FAILURE: 
      return [ 
       ...state, { 
        auth: { 
         'login': false 
        } 
       } 
      ] 
     default: 
      return state; 
    } 
};

我已經嘗試做了愛可信在後行動，但我得到的錯誤就像行動需要是一個普通的對象或類似的東西。

我的問題是你在哪裏執行ajax調用並重定向到ReactJS/redux？在行動還是減速？

這是我packages.json的一部分：

"react": "^15.1.0", 
"react-addons-test-utils": "^15.1.0", 
"react-dom": "^15.1.0", 
"react-redux": "^5.0.4", 
"react-router": "^3.0.2", 
"react-router-dom": "^4.1.1", 
"react-router-redux": "^4.0.8", 
"react-tap-event-plugin": "^2.0.1", 
"redux": "^3.5.2", 
"redux-form": "^6.8.0", 
"redux-logger": "^2.6.1", 
"redux-promise": "^0.5.3", 
"redux-thunk": "^2.1.0",

來源

2017-07-07 Martijn Hiemstra

你應該看看這個鏈接http://redux.js.org/docs/advanced/AsyncActions.html 通常異步Ajax請求被執行行動！ –

也請檢查此SO鏈接https://stackoverflow.com/a/38537873/2293313 –

@RajeshDan優秀的鏈接。這解釋了一切。謝謝：） –

只需使用browserHistory.push("page-url");的方法來改變你的路線，成功的承諾

來源

2017-07-07 09:26:58

有關錯誤後，「行動需要一個普通的對象或東西像那樣「我相信你的Redux-thunk設置不正確。 dispatch(performLogin(username, password))

export function performLogin(username, password) { return function (dispatch) { return login(username, password) .then(function (response) { dispatch({ type: LOGIN_SUCCESS }); }) } }

見例如makeASandwichWithSecretSaucehttps://github.com/gaearon/redux-thunk

來源

2017-07-07 16:57:09

React在成功發佈後重定向

回答

相關問題