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

Question

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

我正在使用 redux 来执行此操作，但在从 AWS 获取信息后在登录页面内设置 userID 时遇到问题。以下是我如何从 AWS 获取信息并尝试将这个新的 userID 分派(dispatch)到 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 代码

reducer

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内部，我尝试了这个，它正确地将信息分派(dispatch)到商店，所以我不确定为什么它在登录内部不起作用。

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

任何提示将不胜感激。谢谢你! :)

Answer 1

在你的 reducer 中，

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
  }
}