如何用redux react调用另一个reducer方法答案

【问题标题】：how to call another reducer method with redux react如何用redux react调用另一个reducer方法
【发布时间】：2017-06-09 09:10:12
【问题描述】：

Reducer 1 代码如下。我想在用户成功认证后调用另一个减速器方法。所以它基于reducer 1的响应，我想调用reducer 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
}
}

当我从 reducer 1 调用 reducer 2 的 action save data 时，它不起作用。如何从reducer 1调度reducer 2的action。

编辑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;
};
}

【问题讨论】：

我不确定我是否完全理解你的问题，但从减速器调用一个动作是一种反模式，应该避免，请参阅：stackoverflow.com/a/36731119/3407732 你可能想要做什么调度第二个动作，触发组件内部的第二个reducer，该组件将由第一个操作更新，在componentWillRecieveProps方法内部facebook.github.io/react/docs/…

标签： reactjs redux

【解决方案1】：

在reducer 中调度一个动作不是一个好的举动。据我了解，您必须同步进行一些更新。一种方法是，一旦第一个 reducer 被更新，你在哪里消费这个 reducer 并在 componentWillReceiveProps 或 componentDidUpdate 内部做类似的事情。注意：在调度之前，您必须导入 configurestore 并从 store 创建一个 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})
     }
 }

【讨论】：