Javascript-Redux操作不'；不要连续跑

我有一种情况，需要连续运行两个Redux操作。 上下文是用户单击预览按钮，我想显示一个加载程序，直到拼图生成完成

function mapDispatchToProps(dispatch) {
  return {
    onPreview: () => {
      dispatch(generatePreview());
    },
  };
}

为此，我使用中间件，首先要执行的操作返回一个

Promise.resolve（）

，我的第二个操作是

then（）

：

不幸的是，加载程序从未出现。I console.logged当我的组件呈现时，将加载设置为true的状态，并且它会更改！我可以看到日志，但看不到加载程序，在调度操作

generatePreviewSuccess（）

或

generatePreviewError（）

之前，组件不会真正重新呈现。这不是加载程序的问题，如果我用循环替换

newpuzzlex

函数，以便有足够的时间查看它，我就能看到它

我的理论是，我用来生成拼图的函数

Wordfind.newpuzzlax（wordList，conf）

阻塞了动作队列，因为在Chrome Redux工具上，我可以看到第一个动作与第二个动作同时出现：

如果我在两个动作的分派之间加上1微秒的延迟，加载程序就会出现。。。但我真的很想了解发生了什么。先谢谢你。如果有什么帮助的话，我用

我还尝试通过以下操作将生成拼图的函数转换为异步函数：

const wordFindAsync = async (wordList, conf) =>
  Wordfind.newPuzzleLax(wordList, conf);

export function generatePreview() {
  return (dispatch, getState) => {
    dispatch(generatingPreview())
      .then(() => {
        const state = getState();
        const conf = state.getIn(['login', 'conf']).toJS();
        const wordList = state.getIn(['login', 'wordList']);
        wordFindAsync(wordList, conf);
      })
      .then(res => dispatch(generatePreviewSuccess(res)))
      .catch(err => {
        dispatch(generatePreviewError(err.message));
      });
  };
}

---

在第二个版本中，您没有将

wordFindAsync（wordList，conf）

中的承诺返回到原始承诺链中，因此在下一个

then

之前，它不会被解析/等待

导出函数generatePreview（）{
返回（调度，获取状态）=>{
分派（生成预览（））
.然后（（）=>{
const state=getState（）；
const conf=state.getIn（['login'，'conf']）.toJS（）；
const wordList=state.getIn（['login'，'wordList']）；
return wordFindAsync（wordList，conf）；//如果不尝试使用
then（）
，会发生什么情况？我从来没有遇到过类似
dispatch（isLoading（true））；dispatch（fetchResults（））；dispatch（isLoading（false））
dispatch
的问题，因此您不必返回
Promise.resolve（）
，但只是按顺序分派操作。@MarkC@Yakimych我以前做过。当我调用Web服务（打印拼图）时，它实际上与另一个操作一起工作，但与这个操作不起作用……这就是为什么我尝试使用
redux thunk
的原因，我认为它来自这个函数。您仍然可以
分派
“正常”即使在异步流中使用redux thunk，也会以旧的方式执行操作。在状态上设置加载标志的事实确认操作已正确调度。可能是组件未订阅相关的状态块，因此未重新提交？还是“加载”发生得很快，而且隐藏得太快？如果加载指示器没有显示，这意味着拼图已经显示和绘制了吗？还是还没有绘制？感谢您的帮助！不幸的是，即使使用您的解决方案，我仍然会遇到一个奇怪的问题：即使在Chrome Inspector上，我的UI也不会重新呈现：为了确保查看我的Container看到状态正在更新，我把它放在我的
render（）
函数上：
if（this.props.puzzleLoading=='true'）{return Loading；}
正如你在视频中看到的，它工作了！但只有代码，而不是UI。。。
const wordFindAsync = async (wordList, conf) =>
  Wordfind.newPuzzleLax(wordList, conf);

export function generatePreview() {
  return (dispatch, getState) => {
    dispatch(generatingPreview())
      .then(() => {
        const state = getState();
        const conf = state.getIn(['login', 'conf']).toJS();
        const wordList = state.getIn(['login', 'wordList']);
        wordFindAsync(wordList, conf);
      })
      .then(res => dispatch(generatePreviewSuccess(res)))
      .catch(err => {
        dispatch(generatePreviewError(err.message));
      });
  };
}