Reactjs 控制异步redux操作中的操作顺序。然后

我正在使用react与redux和thunk中间件。我想做一个异步请求，然后执行一系列操作，然后按同步顺序执行。我没有设法做到这一点

以下是我尝试过的两种方法：

addStudent(name, campusId = undefined, view = 'students') {
        const creatingStudent = axios.post('/api/student', { name: name, campusId: campusId })
            .then(res => {
                return res.data
            })
            .then(student => {
               return store.dispatch(createStudent(student))
            })
            .then(()=> {return store.dispatch(getStudents())})
            .then(()=> {return store.dispatch(changeView(view))})         
            .catch(err => console.log(err))




addStudent(name, campusId = undefined, view = 'students') {
         const creatingStudent = axios.post('/api/student', { name: name, campusId: campusId })
             .then(res => {
                 return res.data
             })
             .then(student => {
                store.dispatch(createStudent(student))
               store.dispatch(getStudents())
                store.dispatch(changeView(view))
             })       
             .catch(err => console.log(err))
     }

我要订单： 1） axios请求 2） 派遣学生 3） 派遣学生 4） 调度变更视图

但是我安装了日志中间件，3和4总是相反的。另外，特别是在第二个选项中，我偶尔会遇到一个致命错误，我认为这是由其他顺序颠倒引起的，但我不能确切地说出顺序，因为应用程序在登录之前就崩溃了

我还试着把电话互相链接起来，但这似乎不起作用，可能是因为他们没有回复承诺

以下是我的getStudents操作创建者：

export const getStudents = () => {
   return dispatch => {
    axios.get('/api/students')
      .then(response => {
        return dispatch(receiveStudents(response.data));
      });
  }
};

这是有道理的，因为它需要一点时间，因为它击中了服务器，但我怎么能。然后关闭它，如果商店。调度不返回一个承诺？正确的方法是什么

---

编辑：这原本没有明确说明。我应该更明确地说，我的沮丧是changeViews（）是在receiveStudents（）之前调度的，而不是像我暗示的那样，changeViews（）是在getStudents（）之前调度的。我不知道getStudents（）是什么时候被分派的。

当我遇到这个问题时，这个对话对我帮助很大

您应该能够使用axios执行以下操作：

axios.all([
  store.dispatch(createStudent(student)),
  store.dispatch(getStudents()),
  store.dispatch(changeView(view))
]).then(() => {
  console.log('I did everything!');
});

您可以使用。然后在每次分派后执行链操作。我知道你说你试过了，但是这个设置是直接从redux thunk中间件github自述文件中获取的，应该适合你的情况：

---

我在回答我自己的问题。我提问方式的一个方面是误导。我想在我有了我的学生后改变视图，我很沮丧，因为我看到了change_视图，然后在我的日志中间件中接收了_学生。但这并不等于说3和4是相反的。事实上，3号和4号是按顺序发送的。我现在明白了，因为getStudents（）本身就是一个异步操作，所以在异步操作完成之前，调度它将得到解决。因此，即使getStudents（）和changeView（）是按顺序分派的，receiveStudents（）也是在changeView（）之后分派的。在我的例子中，如果我想在receiveStudents（）之后调度changeView（），我需要这样做。然后在getStudents（）中调度（changeView（））

下面是实现我想要的重构代码：

addStudent(student, view = 'students') {
    const creatingStudent = axios.post('/api/student', student)
        .then(res => res.data)
        .then(student => store.dispatch(createStudent(student)))
        .then(()=> store.dispatch(getStudents(view)))      
        .catch(err => console.log(err))
}



const getStudents = (view) => {
   return dispatch => {
     axios.get('/api/students')
       .then(res => dispatch(receiveStudents(res.data)))
       .then(()=>dispatch(changeView(view)))
     }
   }

---

嘿，我很感谢你的帮助，但我不知道这个想法是否达到了我想要的——我可能不太清楚。我不希望store.dispatch（getStudents（））在CreateStustudent完成之前执行，也不希望changeView在getStudents完成之前执行。据我所知.all命令将在所有承诺都得到解决后解决。我仍在阅读你发送的页面，试图找出讨论的部分是否与我的案例相关。好的，更新的答案显示了如何一个接一个地采取行动起初我很难看出这与我的第一个示例之间的差异，但现在我看到了一个：文档中的原始函数将dispatch作为参数，并使用dispatch而不是store.dispatch将操作发送到存储。也许这就是我的问题。也许我应该在别处定义一个异步操作创建者，并使用addStudent来调用它。我会试试，然后回来汇报。好的，我回来汇报。我进行了重构，以便我的addStudents现在可以对一个函数调用store.dispatch，该函数是一个异步操作创建者，它将dispatch作为参数，并使用dispatch而不是store.dispatch来分派getStudents、changeView等。changeView仍然在getStudents之前执行。就好像，在这个例子中，在给孩子们做三明治之前，钱就已经用完了。我需要给出一个我所知道的最小的可重复性的例子——它只是让人感觉有一个数据库等等，但是如果你或者其他人仍然在忙，我会去做的；也许我应该更明确地说明发生了什么事情。我的意图是等到我有了学生，然后改变看法。当我看到changeView（）被调度，然后receiveStudents（）被调度，并且在我的学生被调度之前我正在更改我的视图时，我很沮丧。但是我想我现在看到了getStudents（）的分派问题可以解决了，.then链可以在axios请求完成和receiveStudents分派之前继续分派changeView（），更新状态。

addStudent(student, view = 'students') {
    const creatingStudent = axios.post('/api/student', student)
        .then(res => res.data)
        .then(student => store.dispatch(createStudent(student)))
        .then(()=> store.dispatch(getStudents(view)))      
        .catch(err => console.log(err))
}



const getStudents = (view) => {
   return dispatch => {
     axios.get('/api/students')
       .then(res => dispatch(receiveStudents(res.data)))
       .then(()=>dispatch(changeView(view)))
     }
   }