如何让 Redux Action Creator 返回承诺？答案

【问题标题】：How can I make Redux Action Creator return promise?如何让 Redux Action Creator 返回承诺？
【发布时间】：2019-07-02 16:06:32
【问题描述】：

我正在尝试掌握如何从 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)
          })
      }
    }

如何让我的 Action Creator 返回一个承诺？

【问题讨论】：

标签： react-redux

【解决方案1】：

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

redux 传奇
redux-thunk
redux-observable
redux 承诺
redux 循环
redux-ship
redux 逻辑
redux 效果
redux 循环
redux 的副作用

【讨论】：

【解决方案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 为真时，你的函数将被执行。我就是这样做的。向动作创建者添加承诺会增加复杂性并降低代码的可读性。

【讨论】：