Question

我已经创建了一个登录页面，我正在其中使用axios.get从AWS SQL数据库中检索有关用户的信息。检索此信息后，我想将用户ID传递到Google Analytics（分析）页面。我正在React上构建所有这些。

我正在使用redux来执行此操作，但是在从AWS获取信息后，在登录页面内设置userID时遇到了问题。这是我从AWS获取信息并尝试将这个新的userID分发到redux存储中的方式。

import { connect } from 'react-redux';
import { setUserId } from '../redux/methods.js'

      axios.get(url+this.state.email)
        .then(res => {
          let userid = res.data.result.ID; //The user ID is in res.data.result.ID
          this.props.dispatch(setUserId(userid));
        })

export default connect()(Login)

但这不会更改redux存储内的userID。因此，当我访问分析页面内的值时，我仍处于默认状态。

这是我的redux代码

减速器

const userIdDefaultState = {
  id: 0
};

export default (state = userIdDefaultState, action) => {

  switch (action.type){

    case 'SET_USER_ID':
    return action.id;

    default:
      return state;

  }
};

设置用户ID方法

export const setUserId = (id = '') => ({
  type: 'SET_USER_ID',
  id
});

这就是我从分析页面内的redux存储中获取数据的方式

let userID = this.props.id;

这正在呈现我在商店内部提供的默认信息，所以我猜想它是setUserId方法无法正常工作。

在index.js内，我尝试了此操作，它正确地将信息分发到了商店，所以我不确定为什么它无法在登录内部工作。

store.dispatch(setUserId({ id: 2}));

任何提示将不胜感激。谢谢！：）

Answer 1

在减速器中，

case 'SET_USER_ID':
    return action.id;

语句return action.id将覆盖整个userIdDefaultState，并且与您的有效负载不匹配。

鉴于您的状态结构包含id键，您只需确保reducer仅更新该部分。

export const setUserId = (id = '') => ({
  type: 'SET_USER_ID',
  payload: id // added payload key
});

export default (state = userIdDefaultState, action) => {
  const payload = action.payload;

  switch (action.type){
    case 'SET_USER_ID':
      return { ...state, id: payload } // payload is the id
  }
}

Answer 2

switch (action.type){

    case 'SET_USER_ID':
    return {...state, id: action.id};

    default:
      return state;

  }

将数据从一个组件传递到另一个组件-React＆Redux

2 个答案: