Redux state is not working properly in functional components

Question

I have a problem with using React functional components.

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: '...'
        }
      }

  }
};

...

At first time of calling "submitUser", this is an empty object. {}
But, if I call it once more, it is not an empty object.

Is there any workaround for this problem so that I can get the props.User in time?

functional components don't have access to `dispatch`. follow these https://stackoverflow.com/a/47121068/5124488 and https://stackoverflow.com/a/39765573/5124488 ? — blueseal, Nov 01 '19 at 17:58
There's a lot of problems here: `LoginForm` doesn't render anything, captures at least one variable (`dispatch`) in a closure which is a big functional component no-no (they're supposed to be **functional**, i.e. pure functions of props and only use hooks for state), lots of indirection with HOFs, etc. — Jared Smith, Nov 01 '19 at 18:17
Thank you @blueseal. I am sorry, but I ignored "dispatch" when I post this question. So, I edited it again like this. ``` const dispatch = useDispatch(); ``` — Nahrae, Nov 03 '19 at 03:28
Thanks @JaredSmith, I am sorry, but I didn't the section of "rendering" because it was so basic. I added them to be more convenient for understanding. My question again, don't you have really any issue on "state within functional components" ? — Nahrae, Nov 03 '19 at 03:38

Hagai Harari · Accepted Answer · 2019-11-03T10:19:50.263

{ mapStateToProps } method have been used in classes components. Since you use a function component and { useDispatch } hook, there's no need to use that and { connect }.

anyhow, the best way to reach in real-time a change in redux-store with hooks is { 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;

Redux state is not working properly in functional components

1 Answers1