Состояние Redux не работает должным образом в функциональных компонентах - PullRequest
0 голосов
/ 01 ноября 2019

У меня проблема с использованием функциональных компонентов 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?

1 Ответ

1 голос
/ 03 ноября 2019

{mapStateToProps} метод использовался в компонентах классов. Поскольку вы используете компонент функции и ловушку {useDispatch}, вам не нужно использовать это и {connect}.

Во всяком случае, лучший способ в реальном времени добиться изменения в редуксе с помощью крючков - это {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;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...