I got user's google login information from 'react-google-login'
and I want store this information using react-redux.
I call 'responseGoogle' function when login success.
In this function, create struct using (react-google-login)'s response
and keep this struct into component's state.
and call module's function 'onChangeUser' to change Store's state.
but when call 'responseGoogle', error is detected.
the cause is that props from container is undefined.. in component
This is component
const GoogleLoginButton = ({ onChangeUser }) => {
const [user, setUser] = useState(null);
const responseGoogle = response => {
const newUser = {
googleId: response.profileObj.googleId,
username: response.profileObj.name,
token: response.accessToken,
}
setUser(newUser);
onChangeUser(newUser);
};
const responseError = response => {
console.log(response);
}
return (
<GoogleLogin
clientId={CLIENTKEY}
onSuccess={responseGoogle}
onFailure={responseError}
/>
);
}
export default GoogleLoginButton;
This is Container
const GoogleLoginButtonContainer = () => {
const dispatch = useDispatch();
const { user } = useSelector(({ auth }) => ({
user: auth.user
}));
const onChangeUser = value => {
dispatch(
changeField({
key: 'user',
value: value,
})
);
}
useEffect(() => {
dispatch(initializeForm('login'))
}, [dispatch]);
return (
<GoogleLoginButton onChangeUser={onChangeUser} user={user} />
);
}
export default GoogleLoginButtonContainer;
This is module
const CHANGE_FIELD = 'auth/CHANGE_FIELD';
const INITIALIZE_FORM = 'auth/INITIALIZE_FORM'
export const changeField = createAction(
CHANGE_FIELD,
({ key, value }) => ({ key, value })
);
export const initializeForm = createAction(
INITIALIZE_FORM,
user => user
)
const initialState = {
user: {
googleId: '',
username: '',
token: '',
}
};
const auth = handleActions(
{
[CHANGE_FIELD]: (state, { payload: { key, value } }) => ({
...state,
[key]: value,
}),
[INITIALIZE_FORM]: (state, { payload: user }) => ({
...state,
[user]: initialState[user]
})
},
initialState
);
export default auth;