我目前在我们的Flux应用程序中遇到问题,其中组件需要首先获取当前用户,并且当且仅当获取当前用户时,使用不同的Ajax调用获取该用户的通知,如下所示：

_onCurrentUserChange: function() {
  this.setState(getStateFromStores());
  NotificationsActionCreator.getNotifications();
},

正如您所看到的,在我们知道currentUser已更改之后,我正在尝试将操作分派给getNotifications.

但是,Flux不允许多次分派操作,我们已决定应通过操作调度所有服务器请求.

因此,我无法等待接收currentUser,然后调度操作以获取通知.

什么是正确的Flux方法呢？

所以我想我会发布我修复此内容的方式供其他人查看.

基本上,我们最终在WebApiUtils模块中创建了一个函数,该函数对getCurrentUser和getNotificationsForCurrentUser后端路由进行顺序Ajax调用.然后,我们调度包含currentUser和通知的操作. currentUser和notification存储都监听此事件,并且每个事件都会获取所需的数据.

如果您想查看此代码,请查看：
https://github.com/krazemon/repcoin/blob/master/js/api.js#L16
https://github.com/krazemon/repcoin/blob/master/js/stores/AuthStore.js#L59
https://github.com/krazemon/repcoin/blob/master/js/stores/NotificationsStore.js#L59-L62

我选择这个解决方案是因为它不违反我们商店的同步属性,并允许我们避免级联调度.

我是新的反应/ redux.I有一个Redux动作进行身份验证,之后我需要重定向到一个确认页面回家.我不知道如何重定向

这是我的index.js

import React,{ PropTypes } from 'react';
import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import { createStructuredSelector } from 'reselect';
import {loginAction} from './actions';


export class Login extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function

constructor(props) {
super(props);
this.state = {
  username: '',password: ''
};

// this.handleChange = this.handleChangeUsername.bind(this);
// this.handleSubmit = this.handleChangePassword.bind(this);
}

handleChangeUsername(event) {
 console.log(event.target.value);
 this.setState({username: event.target.value});
 console.log(this.state.username)
}
handleChangePassword(event) {
 this.setState({password: event.target.value});
 console.log(this.state.password)
}

 handleSubmit(event) {

this.props.dispatch(loginAction(this.state));
event.preventDefault();
}
render() {
return (
  <div>

  <div className="loginColumns animated fadeInDown">
    <div className="row">

        <div className="col-md-6">

        </div>
        <div className="col-md-6">
            <div className="iBox-content">
                <form className="m-t" role="form" onSubmit={this.handleSubmit.bind(this)}>
                    <div className="form-group">
                        <input type="email" value={this.state.username} onChange={this.handleChangeUsername.bind(this)} className="form-control" placeholder="Username" required="" />
                    </div>
                    <div className="form-group">
                        <input type="password" value={this.state.password} onChange={this.handleChangePassword.bind(this)} className="form-control" placeholder="Password" required="" />
                    </div>
                    <button type="submit" className="btn btn-primary block full-width m-b">Login</button>

                    <a href="#">
                        <small>Forgot password?</small>
                    </a>
                </form>
            </div>
        </div>
    </div>
    <hr/>
    <div className="row">
        <div className="col-md-6">
            copyright Example Company
        </div>
        <div className="col-md-6 text-right">
           <small>© 2014-2015</small>
        </div>
    </div>
</div>

  </div>
);
}
}

Login.propTypes = {
 dispatch: PropTypes.func.isrequired,};

const mapStatetoProps = createStructuredSelector({
 // Login: makeSelectLogin(),});

function mapdispatchToProps(dispatch) {
 return {
 dispatch,};
}

 export default connect(mapStatetoProps,mapdispatchToProps)(Login);

action.js

import {
  DEFAULT_ACTION,LOGIN_ACTION
} from './constants';

export function defaultAction() {
 return {
   type: DEFAULT_ACTION,};
}

export function loginAction(json) {
  return {
    type: LOGIN_ACTION,json
  };
}

reducer.js

import { fromJS } from 'immutable';
import {
  DEFAULT_ACTION,LOGIN_ACTION
} from './constants';

const initialState = fromJS({
    status: false
});

function loginReducer(state = initialState,action) {
    console.log("action",action)
  switch (action.type) {
    case DEFAULT_ACTION:
      return state;

    case LOGIN_ACTION: 
        return _testFunction(state,action.json);
        default:
      return state;
  }
}

function _testFunction(state,json) {
    if(json.username == "abcd@gmail.com" && json.password == "1234")
    return state.set("status",true)
}

export default loginReducer;

我想在成功登录后重定向/ home.我该如何重定向？

那么,你要做的就是这样.将回调传递给您的操作.一旦操作完成它的工作,只需调用该回调,它将以编程方式将您重定向到您需要的URL.提交登录表单后,将带有回调函数的输入值传递给您的操作.

onSubmit(values) {
    this.props.loginAction(values,() => {
      this.props.history.push('/');
    });
  }

然后在您的操作中,如果您正在调用后端API,则在解析promise时,请确保调用传递给此类操作的回调函数.

export function loginAction(values,callback) {
  const request = axios.post(`/endpoint`,values)
    .then(() => callback());

  return {
    type: LOGIN,payload: request
  };
}

这就是你所要做的.您可以根据自己的情况和设置对此进行细微更改.我会把它作为练习保留给你.希望这可以帮助.快乐的编码！