Question

我正在尝试掌握如何从Redux Action Creator中返回承诺。我读过这两篇文章，但都不是更明智的。也许我只是傻瓜。 ;）

https://redux.js.org/advanced/middleware https://medium.com/collaborne-engineering/returning-promises-from-redux-action-creators-3035f34fa74b

我的组件调用了名为startCreateNote()的动作
该操作调用数据库API
数据库操作完成并解析一个对象{newlyCreated-id，reduxStoreObject}
动作创建者已分派
现在，我希望等待Redux Action Creator解决后再继续
Action Creator解决后显示烤面包机

请参见下面的代码。

    //ADD_NOTE action generator
    export const addNote = (id, note) => ({
      type: ADD_NOTE,
      id,
      note
    })
    export const startAddNote = (noteData = {}) => {
      return (dispatch, getState) => {
        //Database API Instruction object
        const apiInstruction = { action: DB_ACTION_ADD, payload: noteData, uid: getState().auth.uid }
        //Call database API to insert Note into Database
        return noteDatabaseAPI(apiInstruction)
          .then(({id, reduxStoreObj}) => {
            //The database API resolves id of newly created Note & reduxStore object 

            //THIS IS WHAT I WANT TO ACHIEVE!
            dispatch(addNote(id, reduxStoreObj)).then(
              toast("New note saved!")
            ).catch(
              toast.error("ERROR - Note was not saved!")
            )
          }).catch( (err) => {
            //This gets triggered with error message:
            //database fail! - TypeError: "dispatch(...).then is not a function"
            console.log('database fail! -', err)
          })
      }
    }

如何让我的动作创建者兑现承诺？

Answer 1

据我了解，使操作创建者返回承诺的（可能）最简单的方法是使用以下几种异步操作库之一：

redux-saga
redux-thunk
redux-observable
redux-promise
redux-loop
redux-ship
redux-logic
redux效果
redux-cycles
redux-副作用-

我在这里找到了更多信息：https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/#redux-saga

Answer 2

一种简单易行的方法是通过减速器进行。

您可以按照如下步骤在减速器中添加一个isNoteSaved变量。

    case ADD_NOTE_REQUEST:
        return {
            ...state,
            isNoteSaved: false
        }

    case ADD_NOTE_SUCCESS:
        return {
            ...state,
            isNoteSaved: true
        }

    case ADD_NOTE_FAILURE:
        return {
            ...state,
            error: action.payload,
            isNoteSaved: false
        }

您的isNoteSaved变量的初始状态为false。

然后代替您的承诺，您可以添加以下内容：

toast() && addNoteReducer.isNoteSaved

这意味着isNoteSaved为true时将执行您的函数。这就是我的方法。向动作创建者添加承诺会增加复杂性，并使代码的可读性降低。

如何使Redux Action Creator退回承诺？

2 个答案: