How to pass class variables in redux store and action? - reactjs

Question

I'm trying to implement Google Authentication using GAPI and I want to store the userId of the user fetched by GAPI into the redux store. I don't know how to pass class component variables into a redux store or action dispatcher. Can someone please help me out to get out of this?
import { SIGN_IN, SIGN_OUT } from './types'
export const signIn = (dispatch, userId) => {
console.log('actions',userId)
dispatch(
{
type: SIGN_IN,
payload:userId
}
)
}
export const signOut = (dispatch) => {
dispatch(
{
type: SIGN_OUT
}
)
}
const mapStateToProps = (state,ownProps) => {
return {
isSignedIn: state.auth.isSignedIn
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
SignIn: () => signIn(dispatch),
SignOut: () => signOut(dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(GoogleAuth);

Answer 1

SignIn: () => signIn(dispatch,ownProps.toString()),
I think it's should be
SignIn: (value) => signIn(dispatch, value),

Answer 2

You can pass value when you actually dispatch an action. once you have the user id you do
this.props.SignIn(userId)
this will fire action dispatch where you have to pass value like
const mapDispatchToProps = (dispatch, ownProps) => {
return {
SignIn: (id) => signIn(dispatch,id),
SignOut: () => signOut(dispatch)
}
}

Answer 3

export const signIn = (userId) => {
return {
type: SIGN_IN,
payload: userId
};
};
export const signOut = () => {
return {
type: SIGN_OUT
};
};
For your GoogleAuth Component:
componentDidMount() {
window.gapi.load('client:auth2', () => {
window.gapi.client.init({
clientId: 'YOUR_CLIENT_ID',
scope: 'email'
}).then(() => {
this.auth = window.gapi.auth2.getAuthInstance(); //Assign the auth instance
this.onAuthChange(this.auth.isSignedIn.get()); //Update the auth state in store
this.auth.isSignedIn.listen(this.onAuthChange); //Wait for the auth state to change in future
});
});
}
onAuthChange = (isSignedIn) => {
if (isSignedIn) {
this.props.signIn(this.auth.currentUser.get().getId());
} else {
this.props.signOut();
}
};
const mapsStateToProps = (state) => {
return { isSignedIn: state.auth.isSignedIn };
}
export default connect(mapsStateToProps, { signIn, signOut })(GoogleAuth);