Question

我正在使用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组件或redux操作。如果有的话，它可能是异步动作创建者的一部分。

Answer 2

您可以通过订阅操作来收听您的商店。 Store.subscribe（handlerFn）应该在商店调度操作时调用处理函数。在处理程序内部，您可以检查状态并做出反应，相应地原谅双关语。

Answer 3

您可以创建一个用于路由的redux中间件。因此，一旦您登录，您可以分派一个动作以被中间件拦截，然后它会动作并路由到下一页。由于您使用的是react-router，因此中间件可能是这样的。

    /**  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;
  }
}

Redux - 我改变了我的状态，在此之后如何让事情发生？

3 个答案: