Question

假设我有update comment行动。当用户在从Promise获得成功结果后更新评论时，我应该关闭评论编辑器。这是我项目中的示例代码：

export const updateComment = (comment,callBack/* ? */) => {
   return (dispatch, getState){
      api.updateComment({...comment}).then((result) => {
             /* Do something */
             callback() /* ? */
       })
    }
}

在react component中我使用类似以下代码的操作：

handleUpdateComment(){
  dispatch(actions.updateComment(this.state.comment,this.closeCommentEitor)
}

它运作良好，但我认为关闭评论编辑器并不是一个好的模式。我正在寻找一个正确的模式来关闭编辑器，而不像我做的那样传递callBack。

Answer 1

更新应用程序状态的唯一因素是减速器。

reducer应负责更新应用程序的状态而不是您的操作（您现在正在传递getState）。

我建议您查看redux-promise-middleware

中间件支持乐观更新并调度待处理，已完成和被拒绝的操作，这些操作可被reducer拦截。

Answer 2

当您使用redux-thunk时，您可以dispatch来自其他操作的操作。你可以做的是，commentEditor有一个你存储在redux中的状态，并根据该状态打开或关闭commentEditor

export const updateComment = (comment, comment_id) => {
   return (dispatch, getState){
      api.updateComment({...comment}).then((result) => {
             /* Do something */
             dispatch({type: 'CLOSE_COMMENT_EDITOR', id: comment_id})
       })
    }
}

在此操作的reducer之后，更改redux store的状态，如

import update from 'immutability-helper'


var initialState = [{commentId: '1', commentEditorOpenStatus: false}, {commentId: '2', commentEditorOpenStatus: false}]
const reducer = (state = initialState, action) => {
     switch(action.type) {
         'CLOSE_COMMENT_EDITOR': 
                  const idx = state.findIndex(obj => obj.commentId == action.id);
                  return update(state, {
                         [idx]: {
                              commentEditorOpenStatus: {
                                  $set: false
                               }
                          }
                   })
            // Other action handlers here
            default: return state
     }

}

回调中redux动作的良好模式

2 个答案: