React Redux Action Payload 返回未定义

Question

我正在尝试将我的个人资料状态放入 redux 中。表单和动作都正常工作，但动作的有效负载在进入减速器时未定义。很确定这是一个菜鸟错误，但我一生都看不到它。

我以 Stephen Grider 的 udemy 课程为模板，并使用与登录应用完全相同的模式让他的帖子部分工作。 redux-promise 已在中间件中正确连接。

package.json（部分）

"react": "^16.2.0",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-form": "^7.2.3",
"redux-forms": "^1.0.0-3",
"redux-promise": "^0.5.3",

登录组件:

function mapStateToProps(state){
  return {
    profile:state.profile
  };
}

export default reduxForm({
  validate,
  form:'PostsNewForm'
})(
  connect(mapStateToProps,{login})(Login)
);

操作配置文件

export const profileActions = {
    login:'uaLogin',
    logout:'uaLogout',
    register:'uaRegister',
    getAll:'uaGetAll',
    getOne:'uaGetOne',
    delete: 'uaDelete'
};

const pa=profileActions;

export function login(values, callback){
  const request=axios.post(`/api/authenticate`,values)
    .then ((res)=> {
      console.log ('*** action:',res.data);//res.data  correctly appears
      callback()
    });
  return {
    type: pa.login,
    payload:request
  }
}

Reducer-profile

import {profileActions as pa} from '../actions';

let profile = JSON.parse(localStorage.getItem('profile'));
const initialState = profile ? { loggedIn: true, profile } : {};

export default function authentication(state = initialState, action) {
  switch (action.type) {
    case pa.login:
      console.log('***reducer',action.payload.data);//action.payload is undefined
      return {
        action.payload.data 
      };
    default:
      return state
  }
}

Answer 1

有一些更正：

登录 asynchronous action.User redux-thunk or redux-saga 用于调度异步操作。
考虑到以上几点，正确的登录操作签名。

export function login(values, callback) { return function (dispatch) { const request = axios.post(/api/authenticate, 值） .then((res) => { console.log('*** action:', res.data);//res.data正确出现打回来（）; //在异步动作中调度另一个动作。<br> 派遣（{ 类型：pa.login，有效载荷：res.data }); }); } }

Answer 2

发生错误是因为 .then 语句直接附加到 const 请求。这正在解决承诺并将请求更改为未定义。

改变这个：

const request=axios.post(`/api/authenticate`,values)
  .then ((res)=> {
  console.log ('*** action:',res.data);//res.data  correctly appears
  callback()
});

为此：

const request=axios.post(`/api/authenticate`,values);

第二个问题是我试图通过后备执行表单中的操作而忘记了反应和 redux 范例；在这种情况下不需要回调。

相反，我应该查看 componentDidMount 或可能的 componentWillMount 并检查状态以决定是否离开。

React Redux Action Payload 返回未定义

React Redux Action Payload returning undefined

reactjs

redux

redux-promise