У меня проблема с использованием функциональных компонентов React.
import {signUp} from '../actions/user_actions';
import { useDispatch } from "react-redux";
// LoginForm.js
const LoginForm = props => {
const dispatch = useDispatch();
submitUser = () => {
const formToSubmit = {email: 'some@abc.com', password: 'testpassword' };
dispatch(signUp(formToSubmit)).then(() => {
console.log("after login", props.User);
// At first time of calling "submitUser", this is an empty object. {}
// But, if I call it once more, it is not empty object.
});
}
return (
<View><Button title="Test Form" onPress={submitUser} /></View>
)
};
const mapStateToProps = state => {User: state.User}
export default connect(mapStateToProps)(LoginForm);
// LoginScreen.js
const LoginScreen = props => {
return <LoginForm User={props} />
}
const mapStateToProps = state => {User: state.User}
export default (mapStateToProps)(LoginScreen);
// user_actions.js
const signUp = formData => {
const request = axios(...).then(...);
return {
type: 'SIGN_UP',
payload: request
}
};
// users_reducer.js
expot default (state={}, action) {
switch(action.type) {
case 'SIGN_UP':
return {
...state,
auth: {
uid: '...'
}
}
}
};
...
При первом вызове submitUser это пустой объект. {}
Но, если я позвоню еще раз, это не пустой объект.
Есть ли способ обойти эту проблему, чтобы я мог вовремя получить props.User?