Redux - 私は自分の状態を変えました。

Question

私はReduxので、私のログインシステムを足すと私は私が私の最初のReduxのためのよりシンプルなもので開始している必要があります感じて：D

しかし：

リデューサー

function application (state = initialState, action) { 
    switch (action.type) { 
     case 'LOGIN_REQUEST': 
      return Object.assign({}, state, { loggedIn: true, shouldRedirect: true }); 
     case 'LOGGED_IN': 
      return Object.assign({}, state, { loggedIn: true, shouldRedirect: true }); 
     case 'LOGIN_FAILED': 
      return Object.assign({}, state, { loggedIn: false, shouldRedirect: false, errorMessage: action.error.message }) 
    } 
    return state 
} 

アクション

function receiveLogin(user) { 
    return { 
     type: LOGIN_SUCCESS, 
     isFetching: false, 
     isAuthenticated: true 
    } 
} 

function loginError(message) { 
    return { 
     type: LOGIN_FAILURE, 
     isFetching: false, 
     isAuthenticated: false, 
     message 
    } 
} 

export function submitLogin (creds) { 
    if(creds.email.length && creds.pw.length){ 
     return receiveLogin(); 
    }else{ 
     return loginError(); 
    } 
} 

は

class SignIn extends React.Component { 

    logIn = (e) => { 
     console.info('as'); 
     e.preventDefault(); 
     store.dispatch(authAction.submitLogin(this.state)); 
    }; 

    render = function() { 
     return (
      <app-content class={loggedOut.home}> 
       <Logo /> 
       <h1>Welcome to <br/> Kindred</h1> 
       <h2>Please sign in to your account</h2> 
       <form role="form" onSubmit={this.logIn}> 
        <input type="text" name="email" onChange={this.changed} component="input" placeholder="Enter email address"/> 
        <input type="password" name="pw" onChange={this.changed} component="input" placeholder="Password"/> 
        <button>Sign In</button> 
       </form> 
       <div className={loggedOut.extraDetails}> 
        <Link to="/signup">Don't have an account yet?</Link> 
        <Link to="/skip" className={loggedOut.extraDetailsRight}>Skip</Link> 
       </div> 
      </app-content> 
     ) 
    } 
}; 

のでLOGGED_IN状態変化に反応します。どのように私は私の状態をリンクして、私を別のページに転送するのですか？私はこのような論理を私の還元剤の中に加えることはできません。これらは純粋でなければなりません。しかし、私は別のページにユーザーに転送する必要があります。私は既にログインルートを持っているか持っていない人に気を付けるためにそれにHOCを持っている反応ルートを持っています。しかし、これはレンダリング時のみ：/私はこのロジックに追加することはできません。

Answer 1

成功した場合にアクションを実行するのではなく、アプリで必要な場合はリダイレクトできます。リダイレクトは、Reactコンポーネントまたはreduceアクションではありません。何かがあれば、それは非同期アクション作成者の一部である可能性があります。

Answer 2

あなたは、行動を購読することによってあなたの店を聴くことができます。 Store.subscribe（handlerFn）は、ストアがアクションをディスパッチするたびにハンドラ関数を呼び出す必要があります。ハンドラの内部では、状態を確認して反応することができます。

Answer 3

ルーティング用のreduxミドルウェアを作成することができます。ログインすると、ミドルウェアによって傍受されるアクションをディスパッチし、次に動作して次のページにルーティングします。反応ルータを使用しているので、ミドルウェアはこのようなものになる可能性があります。

/** Middleware */ 
import { browserHistory } from 'react-router'; 
let navigate = (path) => { 
    browserHistory.push(path); 
}; 

export default store => next => action => { 
    next(action); 

    switch (action.type){ 
    case ActionTypes.NAV_TO_POST_LOGIN : 
    navigate('/postLogin'); 
    break; 
    } 
}