我在使用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”时，这是一个空对象。{}
但是，如果我再次调用它，它不是一个空对象。
有没有解决这个问题的办法，这样我就可以得到道具了。及时使用？
{mapStateToProps}方法已在类组件中使用。由于使用了函数组件和{useDispatch}钩子，因此不需要使用该组件和{连接}。
无论如何，用钩子实时实现redux存储更改的最佳方法是{useSelector}
function LoginForm() {
const dispatch = useDispatch();
const user = useSelector(user => state.auth.id) //as you refered the user at the reducer
//this is just for console the updates
useEffect(() => {console.log(user)} , [user]);
submitUser = () => {
const formToSubmit = {email: 'some@abc.com', password: 'testpassword' };
dispatch(signUp(formToSubmit))
}
return (
<View><Button title="Test Form" onPress={submitUser} /></View>
)
}
export default LoginForm;
