Passing data from one component to another - React & Redux

Question

I've created a login page, where I'm using axios.get to retrieve information about a user from an AWS SQL database. Once retrieving this information, I would like to pass the user ID to an Analytics page. I'm building all of this on React.

I'm using redux to do this, but I'm having an issue with setting the userID inside the login page after getting the information from AWS. Here's how I'm getting the information from AWS and trying to dispatch this new userID into the redux store.

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)

But this does not change the userID inside the redux store. So when I'm accessing the value inside the analytics page, I'm still getting the default state.

Here is my redux code

The reducer

const userIdDefaultState = {
  id: 0
};

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

  switch (action.type){

    case 'SET_USER_ID':
    return action.id;

    default:
      return state;

  }
};

Set User ID Method

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

This is how I'm getting the data from the redux store inside the analytics page

let userID = this.props.id;

This is rendering the default information I'm providing inside the store, so I'm guessing it's the setUserId method that's not working.

Inside index.js, I tried this and it dispatches the information to the store correctly so I'm not sure why it isn't working inside of login.

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

Any tips would be very much appreciated. Thank you! :)

Joseph D. · Accepted Answer · 2019-09-16 15:18:59Z

1

In your reducer,

case 'SET_USER_ID':
    return action.id;

the statement return action.id will override the entire userIdDefaultState and it doesn't match your payload.

Given that your state structure contains id key, you just have to ensure that the reducer is only updating that part.

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

answered Sep 16, 2019 at 15:18

Joseph D.

12.2k4 gold badges40 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

econCodergirl Over a year ago

Thank you - but this makes the id undefined? So now, when I'm trying to access the variable inside of Analytics, this gives me an error..

Joseph D. Over a year ago

You're welcome! your dispatch should look like this: store.dispatch(setUserId(2));.

demkovych · Accepted Answer · 2019-09-16 14:56:25Z

0

switch (action.type){

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

    default:
      return state;

  }

answered Sep 16, 2019 at 14:56

demkovych

9,0453 gold badges23 silver badges27 bronze badges

1 Comment

econCodergirl Over a year ago

Still no luck... Thank you though :)

Collectives™ on Stack Overflow

Passing data from one component to another - React & Redux

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related