title: React - unable to get the store state to pass in a child class component
body: <p>I'm dispatching an action to recreate the <code>userForEdit</code> state variable in UserEditDialog FunctionComponent, for it to be available through useSelector in my component. Becauase I want to pass it to the child class component <code>UserEditForm</code>.</p>
  <p>Here is the code of UserEditDialog</p>
  <pre><code>import {useAppDispatch} from &quot;./../../../../../../redux/store&quot;;
  
  interface UserEditDialogProps{
    id: string;
    show: boolean;
    onHide: () =&gt; void;
  }
  export const UserEditDialog : React.FunctionComponent&lt;UserEditDialogProps&gt; = ({
    id,
    show,
    onHide,
  }) =&gt; {
    // Users UI Context
    const dispatch = useAppDispatch();
  // Where useAppDispatch is exported from store.ts as with &quot;@reduxjs/toolkit&quot;;
  // export type AppDispatch = typeof store.dispatch;
  // export const useAppDispatch = () =&gt; useDispatch&lt;AppDispatch&gt;(); 
    useEffect(() =&gt; {
      // server call for getting User by id
        dispatch&lt;any&gt;(actions.fetchUser(id));  //should we add .then callback?
    }, [id, dispatch]);
  
    // Users Redux state
    const { actionsLoading, userForEdit } = useSelector(
      (state: RootState) =&gt; ({
        actionsLoading: state.users.actionsLoading,
        userForEdit: state.users.userForEdit,
      }),
      shallowEqual
    );
    // server request for saving user
    const saveUser = async (user: User) =&gt; {
      if (!id) {
        // server request for creating user
        await dispatch&lt;any&gt;(actions.createUser(user));//.then(() =&gt; onHide());
        onHide();
      } else {
        // server request for updating user
        await dispatch&lt;any&gt;(actions.updateUser(user));//.then(() =&gt; onHide());
        onHide();
      }
    };
  
    return (
      &lt;Modal
        size=&quot;lg&quot;
        show={show}
        onHide={onHide}
        aria-labelledby=&quot;example-modal-sizes-title-lg&quot;
      &gt;
        &lt;UserEditDialogHeader _title=&quot;Edit User&quot; /&gt;
        &lt;UserEditForm
          saveUser={saveUser}
          actionsLoading={actionsLoading}
          user={userForEdit}
          onHide={onHide}
        /&gt;
      &lt;/Modal&gt;
    );
  }
  </code></pre>
  <p>And here is UserEditForm component</p>
  <pre><code> interface UserEditFormProps{
      saveUser:any,//(fileName:Blob) =&gt; Promise&lt;void&gt;, // callback taking a string and then dispatching a store actions
      user:User,
      actionsLoading:boolean,
      onHide:() =&gt; void,
    }
    interface UserEditFormState{
      name: string,
      cardNo: string,
      faceFileInput:React.RefObject&lt;any&gt;,
      groups:any,
      groupName: string
    }
    export class UserEditForm extends React.Component&lt;UserEditFormProps,UserEditFormState&gt; {
    //  state: UserImportFormState;
      constructor(props:UserEditFormProps){
        super(props);
        //this.loadUsers=props.loadUsers;
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state={
          name: props.user.name,  //undefined user on props
          cardNo:props.user.cardNo, //undefined user on props
          faceFileInput: React.createRef(),
          // this should be a dropdown if there are groups or hide if no groups are there
          groups:[{id:&quot;abc&quot;,name:&quot;ABC&quot;},{id:&quot;def&quot;,name:&quot;DEF&quot;},{id:&quot;fgh&quot;,name:&quot;FHG&quot;}],
          groupName: props.user.groupName, //undefined user on props
        }
      }
  
      //React.ChangeEvent&lt;HTMLInputElement&gt;
      handleInputChange(event:React.ChangeEvent&lt;HTMLInputElement | HTMLSelectElement&gt;) {
        event.preventDefault();
        const name = event.target.name;  
  //      event.target.type
        const value = event.target.value;
        this.setState((current) =&gt; ({ ...current, [name]: value }))
      }
  
      handleSubmit(event:React.FormEvent&lt;HTMLFormElement&gt;) {
        event.preventDefault();
        const name:string=this.state.name;
        const cardNo:string=this.state.cardNo;
        const face:File=this.state.faceFileInput.current.files[0];
        const groupName:string=this.state.groupName;
        //construct updated user before submit
        //if 
  //      const user:User= {name,cardNo,face,groupName}
        // this.props.saveUser(props.user.id,name,cardNo,face,groupName);
      }
    
    render(){
    return(
  ....
  )}}
  </code></pre>
  <p>And the fetchUser Action</p>
  <pre><code>export const fetchUser = (id:string) =&gt; (dispatch:Dispatch) =&gt; {
    if (!id) {
      return dispatch(actions.userFetched({ userForEdit: undefined }));
    }
  
    dispatch(actions.startCall({ callType: callTypes.action }));
    return requestFromServer
      .getUserById(id)
      .then(response =&gt; {
        const user = response.data;
        dispatch(actions.userFetched({ userForEdit: user }));
      })
      .catch(error =&gt; {
        error.clientMessage = &quot;Can't find user&quot;;
        dispatch(actions.catchError({ error, callType: callTypes.action }));
      });
  };
  </code></pre>
  <p>When I debug the code the problem is <code>dispatch&lt;any&gt;(actions.fetchUser(id));</code> in UserEditDialog component is not being dispatched before the child component UserEditForm is composed. The reason might be, useEffect is async. But how to dispatch the action and get the latest store state before composing child component. Is there anything wrong with using the class component as child of a FunctionComponent?
  Please Help!</p>