title: Handle async operation in Redux
body: <p>I am trying to render <code>post.paragraph</code> coming from the Redux store.</p>
  <p>This is the code I am using:</p>
  <pre class="lang-js prettyprint-override"><code>    const postDetails = useSelector((state) =&gt; state.postDetails);
      const { loading, post, error } = postDetails; 
  
      const editorContent =   post ?
      EditorState.createWithContent(convertFromRaw(JSON.parse(post.paragraph))) : 
      EditorState.createEmpty();
      
      const [editorState, setEditorState] = useState({ editorState: editorContent });
      
      const handleEditorChange = (editorState) =&gt; { setEditorState({ editorState }) }
      
      const submitHandler = (e) =&gt; {
          e.preventDefault();
          dispatch(
            updatePost({
              _id: id,
              title,
              image,
              images,
              paragraph: JSON.stringify(
                convertToRaw(editorState.editorState.getCurrentContent())
              ),
            })
          );
        };
      
      &lt;Editor
         editorState={editorState.editorState}
         onEditorStateChange={handleEditorChange}
       /&gt;
  </code></pre>
  <p>Though it seems like it takes time for <code>post.paragraph</code> to display therefore my app fails. In fact, if I <code>console.log(post.paragraph)</code> I get &quot;undefined&quot; twice and only then I get my <code>post.paragraph</code> displayed.</p>
  <p><a href="https://i.stack.imgur.com/JHT9A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JHT9A.png" alt="enter image description here" /></a></p>
  <p>To fix the issue i tried to put everything in an if statement like this:</p>
  <pre class="lang-js prettyprint-override"><code>    const postDetails = useSelector((state) =&gt; state.postDetails);
          const { loading, post, error } = postDetails; 
          const content = (async (err, res) =&gt; {
          const editorContent = await post.paragraph;
            if (post.paragraph) {
              res.send({ editorContent: EditorState.createWithContent(convertFromRaw(JSON.parse(post.paragraph))) });
            } else {
                res.send({ editorContent: EditorState.createEmpty()});
              }
              return editorContent;
            })
      
      
          const [editorState, setEditorState] = useState({ editorState: content });
          
          const handleEditorChange = (editorState) =&gt; { setEditorState({ editorState }) }
          
          const submitHandler = (e) =&gt; {
              e.preventDefault();
              dispatch(
                updatePost({
                  _id: id,
                  title,
                  image,
                  images,
                  paragraph: JSON.stringify(
                    convertToRaw(editorState.editorState.getCurrentContent())
                  ),
                })
              );
            };
          
          &lt;Editor
             editorState={editorState.editorState}
             onEditorStateChange={handleEditorChange}
           /&gt;
  </code></pre>
  <p>But now the error I get is the following:</p>
  <p><a href="https://i.stack.imgur.com/bxJ4h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bxJ4h.png" alt="enter image description here" /></a></p>
  <p>I also tried the following, but i get the same error:</p>
  <pre class="lang-js prettyprint-override"><code>    const postDetails = useSelector((state) =&gt; state.postDetails);
          const { loading, post, error } = postDetails; 
            const editorContent =   !loading ?
      EditorState.createWithContent(convertFromRaw(JSON.parse(post.paragraph))) : 
      EditorState.createEmpty();
      
          const [editorState, setEditorState] = useState({ editorState: editorContent });
          
          const handleEditorChange = (editorState) =&gt; { setEditorState({ editorState }) }
          
          const submitHandler = (e) =&gt; {
              e.preventDefault();
              dispatch(
                updatePost({
                  _id: id,
                  title,
                  image,
                  images,
                  paragraph: JSON.stringify(
                    convertToRaw(editorState.editorState.getCurrentContent())
                  ),
                })
              );
            };
          
          &lt;Editor
             editorState={editorState.editorState}
             onEditorStateChange={handleEditorChange}
           /&gt;
  </code></pre>
  <p>How should I tackle this async request? Many thanks!</p>