将返回承诺的函数置于 redux 状态

Question

我稍后会解释为什么我要这样做。这是问题所在。我有一个返回如下承诺的函数：

const testFunc = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() >  0.5) {
        resolve('succeeded');
      } else {
        reject('failed');
      }
    }, 1000);
  });
};

正如预期的那样，我可以像这样调用它：

testFunc()
  .then((result) => console.log(result)) // 'succeeded'
  .catch((error) => console.log(error)); // 'failed'

或者将它分配给一个变量并像这样调用它

const testFuncVar = testFunc;
testFuncVar()
  .then((result) => console.log(result)) // 'succeeded'
  .catch((error) => console.log(error)); // 'failed'

这些都在意料之中。但是，一旦我将该函数置于 redux 状态，然后从那里调用它，它就不再起作用了。这是我所做的（非常简化）。

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) => {
    const {testFunc} = getState();
    // this is not working
    testFunc()
      .then((result) => console.log(result))
      .catch((error) => console.log(error));
  };
}

我得到的错误是_promise2 is not defined。注意变量名_promise2应该来自 babel transpiler。如果我console.log(state.testFunc)或console.log(testFunc)，我得到：

testFunc() {
  return new _promise2.default(function (resolve, reject) {
    if (Math.random() > 0.5) {
      resolve('succeeded');
    } else {
      reject('failed');
    }
  });
}

那么Promise每当函数处于 redux 状态时，对象就以某种方式丢失了？

但我确实找到了解决方法。如果我将功能更改为

const testFunc = (resolve, reject) => {
  setTimeout(() => {
    if (Math.random() >  0.5) {
      resolve('succeeded');
    } else {
      reject('failed');
    }
  }, 1000);
};

并调用它resolve并reject作为参数传入，然后我很好。

// this works
new Promise((resolve, reject) => state.testFunc(resolve, reject))
  .then((result) => console.log(result))
  .catch((error) => console.log(error));

我想知道为什么一个返回 promise 的函数一旦放入 redux store 就不起作用，但一个没有返回 promise 的函数就起作用了？

现在谈谈为什么我想这样做。我想要实现的是让作业队列定期调度一些异步操作，并根据结果（解决或拒绝）执行其他操作（例如重试或发送通知）。我想在队列中动态添加/删除作业，因此很难有一个可以处理所有可能操作的减速器。感觉这是一个合理的方法来处理它。我愿意接受建议。

Answer 1

经过进一步挖掘，我终于发现这个问题确实与 redux 或 Promise 无关。这只是因为它们testFunc通过分配给对象文字来添加到 redux 状态initialState。当这样做时，绑定就会丢失，因此会出现错误_promise2 is undefined。实际上，如果我testFunc动态添加到 redux 状态（例如通过动作创建器和减速器），绑定就会被保留并且一切都工作得很好。这是该问题的更详细解释/sf/answers/189141991/。

testFunc仅供参考，这里是通过reducer添加到redux状态的代码

const initialState = {};
// redux reducer
export default function jobReducer(state = initialState, action = {}) {
  switch (action.type) {
    case ADD_JOB:
      return {job: action.job};
    default:
      return state;
  }
}

// action creator
export function addJob(job) {
  return {
    type: ADD_JOB,
    job: job
  };
}
...
// add testFunc to redux state via action creator,
// I'm using redux-thunk here to access dispatch
function addTestFun() {
  return (dispatch) => {
    dispatch(addJob(testFunc));
  };
}
...
// invocation of testFunc. Here I'm using redux-thunk to access redux state
function testFunInState() {
  return (dispatch, getState) => {
    const {testFunc} = getState();
    // Now this is working
    testFunc()
      .then((result) => console.log(result))
      .catch((error) => console.log(error));
  };
}