Reactjs React Redux Handle事件已成功完成

我有一个屏幕，用户可以在其中添加卡到牌组。这是“AddCard.js”

我想要下一个行为：

• 用户打开屏幕
• 填写输入，按下添加按钮
• 在成功/错误时，我想

  console.log（“成功/错误”）

  （对于最后的行为，我想弹出导航堆栈，或者向用户显示错误消息）

事实上：

• [操作]添加卡的分派事件
• [中间件]使用service.js并发送成功/错误操作
• [REDUCER]

  case ADD\u CARD\u SUCCESS:return{…state，isCardAddSuccess:true}

• [问题]调用

  \onCardAddSuccess

  或

  \onCardAddError

  的最佳方式是什么

这是我的密码：

中间件

const addCardFlow = ({ api }) => ({ dispatch }) => next => async (action) => {
    next(action);

    if (action.type === ADD_CARD) {
        try {
            dispatch(uiActions.setLoading(true));
            const deckId = action.payload.deckId;
            const card = action.payload.card;
               
            const result = await api.cards.addCardToDeck(deckId, card);

            //TODO: handle result
            dispatch(addCardSuccess());
        } catch (error) {
            dispatch(addCardFailure(error));
        }finally {
            dispatch(uiActions.setLoading(false));
        }
    }
}

减速器

switch (action.type) {
 case ADD_CARD:
        return {
            ...state,
            isCardAddSuccess: false
        }
    case ADD_CARD_SUCCESS:
        return {
            ...state,
            isCardAddSuccess: true,
        }
    case ADD_CARD_FAILURE:
        return {
            ...state,
            isCardAddSuccess: false
        }

选择器

export const isCardAddSuccess = state => state.cards.isCardAddSuccess;

屏风

class AddCard extends React.Component {
    
    // HOW?
    _onCardAddSuccess(){
        console.log("success")
    }

    // HOW?
    _onCardAddError(){
        console.log("error")
    }

    addCard(values) {
        this.props.addCardToDeck("7Kicdj2sHsi2Bi5HVN6C", {
            frontText : values.frontText,
            backText : values.backText
        })
    }

    render() {
        return (
            <SafeAreaView>
                <CardItemForm
                    frontText={""}
                    backText={""}
                    actionButtonText={"Add card"}
                    onSubmit={(values) => this.addCard(values)}
                />
            </SafeAreaView>
        );
    }
}

const mapStateToProps = state => {
    return {
        isCardAddSuccess: isCardAddSuccess(state)
    }
}

const mapDispatchToProps = dispatch => ({
    addCardToDeck: (deckId, card) => {
        dispatch(addCard(deckId, card))
    },
})

export default connect(mapStateToProps, mapDispatchToProps)(AddCard);

class AddCard扩展了React.Component{
//怎么做？
_onCardAddSuccess（）{
console.log（“成功”）
}
//怎么做？
_onCardAddError（）{
console.log（“错误”）
}
添加卡（值）{
this.props.addCardToDeck（“7Kicdj2sHsi2Bi5HVN6C”{
frontText:values.frontText，
backText:values.backText
})
}
render（）{
返回(
this.addCard（值）}
/>
);
}
}
常量mapStateToProps=状态=>{
返回{
isCardAddSuccess:isCardAddSuccess（状态）
}
}
const mapDispatchToProps=调度=>({
addCardToDeck：（deckId，card）=>{
调度（addCard（deckId，card））
},
})
导出默认连接（mapStateToProps、mapDispatchToProps）（AddCard）；