React Redux Action Payload 返回未定义

Posted 2023-02-22

【中文标题】React Redux Action Payload 返回未定义

【英文标题】：React Redux Action Payload returning undefined

【发布时间】：2018-08-12 00:09:53

【问题描述】：

我正在尝试将我的个人资料状态转换为 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
  

减速机配置文件

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
  

【参考方案1】：

有一些更正：

登录是asynchronous action。用户redux-thunk 或redux-saga 用于调度异步操作。

考虑到以上几点，登录操作的正确签名。

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

【讨论】：

U r 在有效负载中返回承诺，需要解析以获得响应数据。而不是像我上面显示的那样做。

我正在使用 redux-promise 中的 promise 来处理 promise 而不是 redux-thunk 并且它确实有效，我刚刚创建了另一个组件页面，它可以在其中工作；正确处理reducer返回_.mapKeys(action.payload.data,'_id');。

@Keslavi 能否请您添加一些代码如何解决承诺

github.com/keslavi/react-auth。 MERN 使用 create-react-app 创建，然后将 packages.json 中的代理附加到 express 部分。非常感谢您的耐心等待！

@RIYAJKHAN 请不要向只需要简单异步操作的人推荐redux-saga，我会选择thunk。

【参考方案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);

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

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

【讨论】：

如果我确实需要使用减速器进行回调，请添加此内容以供将来参考：***.com/questions/44325372/…