title: Put function that returns promise in redux state
body: <p>I'll explain why I want to do this later. 
  Here is the problem. I have a function that returns a promise like below:</p>
  
  <pre><code>const testFunc = () =&gt; {
    return new Promise((resolve, reject) =&gt; {
      setTimeout(() =&gt; {
        if (Math.random() &gt;  0.5) {
          resolve('succeeded');
        } else {
          reject('failed');
        }
      }, 1000);
    });
  };
  </code></pre>
  
  <p>As expected, I can invoke it like this just fine:</p>
  
  <pre><code>testFunc()
    .then((result) =&gt; console.log(result)) // 'succeeded'
    .catch((error) =&gt; console.log(error)); // 'failed'
  </code></pre>
  
  <p>Or assign it to a variable and call it like this</p>
  
  <pre><code>const testFuncVar = testFunc;
  testFuncVar()
    .then((result) =&gt; console.log(result)) // 'succeeded'
    .catch((error) =&gt; console.log(error)); // 'failed'
  </code></pre>
  
  <p>These are all expected. However, once I put the function in redux state, then invoke it from there, it doesn't work anymore. Here is what I did (grossly simplified).</p>
  
  <pre><code>const initialState = {testFunc: testFunc};
  // redux reducer, action creator, etc.
  ...
  ...
  // somewhere later. Here I'm using redux-thunk to access redux state
  function testFunInState() {
    return (dispatch, getState) =&gt; {
      const {testFunc} = getState();
      // this is not working
      testFunc()
        .then((result) =&gt; console.log(result))
        .catch((error) =&gt; console.log(error));
    };
  }
  </code></pre>
  
  <p>The error I got was <code>_promise2 is not defined</code>. Note that the variable name <code>_promise2</code> should be from babel transpiler. If I <code>console.log(state.testFunc)</code> or <code>console.log(testFunc)</code>, I got:</p>
  
  <pre><code>testFunc() {
    return new _promise2.default(function (resolve, reject) {
      if (Math.random() &gt; 0.5) {
        resolve('succeeded');
      } else {
        reject('failed');
      }
    });
  }
  </code></pre>
  
  <p>So somehow the <code>Promise</code> object got lost whenever the function is put in redux state?</p>
  
  <p>But I did find a workaround. If I change the function to</p>
  
  <pre><code>const testFunc = (resolve, reject) =&gt; {
    setTimeout(() =&gt; {
      if (Math.random() &gt;  0.5) {
        resolve('succeeded');
      } else {
        reject('failed');
      }
    }, 1000);
  };
  </code></pre>
  
  <p>And call it with <code>resolve</code> and <code>reject</code> passed in as parameters, then I'm good.</p>
  
  <pre><code>// this works
  new Promise((resolve, reject) =&gt; state.testFunc(resolve, reject))
    .then((result) =&gt; console.log(result))
    .catch((error) =&gt; console.log(error));
  </code></pre>
  
  <p>I'm wondering why a function that returns promise doesn't work once it's put in redux store, but one without returning promise works?</p>
  
  <p>Now onto why I want to do it this way. What I'm trying to achieve is to have a job queue that periodically dispatch some async actions, and depending on the result (resolve or reject), does something else (like retry, or send out notification). I want to dynamically add/remove jobs to and from the queue, therefore it's hard to have a reducer that can handle all possible actions. It feels like this is a reasonable way to approach it. I'm open to suggestions.</p>