Question

使用Redux从api提取数据时遇到问题。我正在使用React前端和表达后端。我正在尝试通过后端的Google OAuth设置身份验证，然后将标头（已成功设置）发送回我的React客户端。我可以从api成功获取一些数据，但是无法使用redux来获取用户。

我的用于创建用户的操作创建者：

export const fetchUser = () => async dispatch => {
  const res = await posts.get ('/api/current_user');
  dispatch ({type: FETCH_USER, payload: res.data});
};

在上面的代码中，posts只是一个导出，允许我使用axios向api发出请求

将用户数据发送到客户端的路由处理程序：

  app.get ('/api/current_user', (req, res) => {
    console.log("this is a req user", req.user)
    res.send (req.user);
  });

请注意，路由处理程序上的console.log成功记录了我尝试获取的用户。

在客户端，我认为我已将redux存储正确连接到此组件：

  render () {
  console.log(this.props)
    return (
      <div>
        <div>

          {/* {this.renderAuthButton ()} */}
        </div>

      </div>
    );
  }
}

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

export default connect (mapStateToProps)(GoogleAuth);

当我尝试记录this.props时，根本不会记录用户。我试过在render方法中调用fetchUser函数，但它也不返回用户。任何帮助将不胜感激，我很乐意提供任何其他信息。预先谢谢你！

Answer 1

尝试像这样将dispatch连接到redux：

import { fetchUser } from '....'
//
//
//
function mapStateToProps(state) {
  return {auth: state.auth};
}

function mapDispatchToProps(dispatch) {
  return {fetchUser: () => fetchUser(dispatch)};
}

export default connect (mapStateToProps, mapDispatchToProps)(GoogleAuth);

在组件生命周期中的调用操作：

componentDidMount() {
   this.props.fetchUser()
}
render () {
   console.log(this.props) // Here you will see data that return from 
   // fetchUser action in store redux at the second time of render Component
   return (
       ...
   )
}

Answer 2

使用redux-thunk映射动作创建者的正确方法应该是：

import { fetchUser } from '....'
// ...

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

function mapDispatchToProps(dispatch) {
  return {fetchUser: () => dispatch(fetchUser())};
}

export default connect (mapStateToProps, mapDispatchToProps)(GoogleAuth);

或仅将动作创建者作为映射对象发送到connect的第二个参数：

import { fetchUser } from '....'
// ...

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

export default connect (mapStateToProps, {fetchUser})(GoogleAuth);

在this part of react-redux documenation中了解更多信息。

无法从API使用Redux获取用户

2 个答案: