使用.Then的异步REDUX操作中的操作顺序

Question

我正在使用React与Redux和Thunk Muiddrware。我想执行一个异步请求，然后采取一堆动作。然后以同步顺序出现它。我没有设法实现它。

这是我尝试的两种方法：

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总是相反。另外，尤其是第二种选择，我偶尔会遇到我认为是其他订单逆转引起的致命错误，但是我无法确切地分辨出什么顺序，因为该应用程序在登录之前崩溃了。

我还试图链接彼此派遣的电话，但这似乎不起作用，可能是因为他们没有返回承诺。

这是我的GetAdudents Action Creator：

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

因为它撞到了服务器，这需要花费更长的时间，但是如果Store.dispatch不返回承诺，我该如何。正确的方法是什么？

编辑：最初并未清楚地说明这一点。我应该更明确地说，我的挫败感是changeviews((是在接收者((之前派发的，而不是，正如我所暗示的那样，changeviews((是在getStudents((之前派遣的。我不知道何时派遣getStudents((。

Answer 1

当我遇到这个问题时，这次对话对我有很大帮助，https://github.com/reactjs/redux/redux/sissues/723。

您应该能够使用Axios进行这样的事情：

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

您可以使用。然后每次分配后进行链动作。我看到您说您尝试过，但是此设置直接从Redux-Thunk Middleware Github Readme中拔出，应该为您的案例工作https://github.com/gaearon/redux-thunk：

return dispatch(
      makeASandwichWithSecretSauce('My Grandma')
    ).then(() =>
      Promise.all([
        dispatch(makeASandwichWithSecretSauce('Me')),
        dispatch(makeASandwichWithSecretSauce('My wife'))
      ])
    ).then(() =>
      dispatch(makeASandwichWithSecretSauce('Our kids'))
    ).then(() => //Chain another dispatch
      dispatch(getState().myMoney > 42 ?
        withdrawMoney(42) :
        apologize('Me', 'The Sandwich Shop')
      )
    );

Answer 2

我正在回答自己的问题。我问这个问题的方式的一个方面是误导性。我想在有学生的学生之后改变视图，我对我看到Change_view，然后在记录中间件中接收_STUDENT感到沮丧。但这与说3和4相反的情况并不相同。实际上，按顺序派遣3和4。我现在明白，由于GetStudents((本身是异步操作，因此派遣它将在异步动作完成之前解决。因此，即使按顺序派发getStudents((和changeview((，也会在changeview((之后派发ackivestudents((。就我而言，如果我希望在收款人((之后派发changeView((，则我需要在getStudents((中进行。

此处是完成我想要的代码：

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)))
     }
   }