成功後のリダクトリダイレクトのリダイレクト

Question

私は通常Javaプログラマーとして働いています。私は、Javaで多くのコードデザインが標準化されていることを愛しています。たとえば、SpringのJavaの例やHibernateのコードを読むと、構造的には世界全体で同じように見えます。

私は現在、reduxとReactJSに取り組んでいます。私はそれを理解できないようです。私が見たすべての例では、すべてが完全に異なっています.JavaScriptコミュニティ全体が、同じことをどうやって行うのか心配していないかのように縫い合わせるので、ここで誰かがReactJS/reduxの仕組みを説明できることを願っています。

私はログインページを持っています。ボタンをクリックすると、oauth2認証サーバーに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; 
    } 
};    

私はaxiosポストをやって試してみました私はアクションが単純なオブジェクトまたはそのようなものである必要があるようなエラーを持っています。

私の質問は、ReactJS/reduxでajax呼び出しとリダイレクトをどこで実行するのですか？アクションやレデューサーで？

この私の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", 

Answer 1

ちょうどあなたのルートを変更するにはbrowserHistory.push("page-url");メソッドを使用して、成功を約束した後

Answer 2

エラーについて「アクションは、プレーンなオブジェクトか何かする必要がありますそのように "私はあなたのReduxサンクが間違って設定されていると信じています。 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