如何使用 Redux React 调用另一个 Reducer 方法



Reducer 1 代码如下。我想在用户成功认证后调用另一个化简器方法。所以它基于化简器 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;
};
}

化简器内调度操作不是一个好举动。据我了解,您必须同步进行一些更新。一种方法是,一旦第一个减速器被更新,无论你在哪里消耗该化简器,在组件WillReceiveProps或componentDidUpdate中做类似的事情。注意:在调度之前,您必须导入配置存储并从存储创建常量调度。

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})
     }
 }

最新更新