如何用redux反应调用另一个reducer方法

时间:2017-01-24 14:12:59

标签: reactjs redux

Reducer 1代码如下。我想在成功验证用户后调用另一种reducer方法。所以它基于减速器1的响应,我想调用减速器2的方法/动作。

const LOGIN = 'redux-example/auth/LOGIN';
const LOGIN_SUCCESS = 'redux-example/auth/LOGIN_SUCCESS';
const LOGIN_FAIL = 'redux-example/auth/LOGIN_FAIL'; 
import { browserHistory } from 'react-router';
import { apiurl } from '../../Constants';

import {savedata} from '../../redux/modules/new';

export default function reducer(state = initialState, action = {}) {
switch (action.type) {    
case LOGIN:
  return {
    ...state,
    loggingIn: true
  };
case LOGIN_SUCCESS:
  return {
    ...state,
    loggingIn: false,
    user: action.result
  };
case LOGIN_FAIL:
  return {
    ...state,
    loggingIn: false,
    user: null,
    loginError: action.error
  };
default:
  return state;
}
}

export function login(page,email,password) {
var querystring = require('querystring');
if(action == undefined) action = null;
var data = querystring.stringify({
    email: email,
    password: password
});
return {
    types: [LOGIN, LOGIN_SUCCESS, LOGIN_FAIL],
    promise: (client) => client.post(apiurl + 'ajax/login', {
       data: data
    }).then(response => {
        //console.log(response);
        switch(page){
            case 'signin':
                if(response.auth == 'true') {
                    redirectuser(response);
                }
            break;
            default:
            break;
        }
        return response;
    })
    .catch( error => Promise.reject(error))
};

}

export  function  redirectuser(response) {
console.log('response is as below');
console.log(response);
if(response.action == 'action1'){
    savedata();
    // here I want call another reducer method save data
}
}

当我从减速器1调用减速器2的动作保存数据时,它不起作用。如何从减速机1发送减速机2的动作。

编辑1:我的中间件代码如下

export default function clientMiddleware(client) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
  return action(dispatch, getState);
}

const { promise, types, ...rest } = action; // eslint-disable-line no-redeclare
if (!promise) {
    return next(action);
}

const [REQUEST, SUCCESS, FAILURE] = types;
next({ ...rest, type: REQUEST });

const actionPromise = promise(client, dispatch);
actionPromise.then(
  result => next({ ...rest, result, type: SUCCESS }),
  error => next({ ...rest, error, type: FAILURE })
).catch(error => {
  next({ ...rest, error, type: FAILURE });
});

return actionPromise;
};
}

1 个答案:

答案 0 :(得分:0)

在减速器内部调度动作不是一个好举动。据我了解,您必须同步进行一些更新。一种方法是,一旦第一个化简器被更新,无论您在哪里使用该化简器,并且componentWillReceiveProps或componentDidUpdate内部都会执行类似的操作。 注意:在分派之前,您必须导入configurestore并从存储中创建const派发。

componentWillReceiveProps(nextProps)
 {
  //only if user was not there previously and now user is there
     if(!this.props.user && nextProps.user)
      {
         dispatch({type: SECOND_ACTION, payLoad})
     }
 }