Redux mapStateToProps：在异步更新后调度操作以关闭弹出窗口

Question

我将状态传递给我的组件：

const mapStateToProps = (state, ownProps) => { 
    return { 
        pageState: state.pageState
    } 
} 

pageState 包含有关“页面”的信息，即页面元数据（例如页面名称），它还接收异步 CRUD 操作更新页面数据时使用的方法（“PUT”）。

React 组件是用户在想要更新和保存页面名称时调用的模式窗口。
异步 PUT 操作工作正常，并且 pageState 得到正确更新（这里没问题），但我不明白应该从哪里分派在异步调用之后执行的“hideModal”操作。

选项是：

1. mapStateToProps：在这里检查pageState是否包含“PUT”，然后派发关闭动作；
2. 来自渲染方法：但不鼓励这样做；
3. 来自shouldComponentUpdate。但是，我在测试时遇到了一个奇怪的错误； mapStateToProps 似乎没有在第一次请求时正确更新 this.props.pageState。它仅适用于第二个（？）。另外，我觉得无论如何我都不应该把它放在这里。 shouldComponentUpdate 不应该有这样的副作用。

我从容器中连接组件的代码：

const renameModal = connect( 
    mapStateToProps, 
    mapDispatchToProps
)(RenameModal); 

有什么帮助吗？

信息：我使用 Redux-saga 进行异步调用。不过这应该没关系。页面信息的更新可以从我的应用程序的不同位置发生，并且这个特定的操作（关闭模式）应该与处理服务器请求的实现保持分离。

Redux-saga，监听异步更新请求：

function* updatePage(action){
    try{ 
        const page = yield call(Api.updatePage, action.payload.siteSlug, action.payload.pageId, action.payload.page); 
        yield put({type: 'PUT_PAGE_SUCCEEDED', page}); 
    }catch(error){ 
        yield put({type: 'PUT_PAGE_FAILED', error}); 
    } 
} 

export function* watchUpdatePage(){ 
    yield* takeLatest('PUT_PAGE_REQ', updatePage); 
} 

减速器：

const asyncReducer = (state = pageState, action) => { 
    switch(action.type){ 
        case 'GET_PAGE_SUCCEEDED': 
            console.log("get page succeeded"); 
            return Immutable.fromJS({ 
                type: "GET_PAGE_SUCCEEDED", 
                method: "GET", 
                pageState: action.page
            }); 

        case 'PUT_PAGE_SUCCEEDED': 
            console.log("put page succeeded"); 
            return Immutable.fromJS({ 
                type: "PUT_PAGE_SUCCEEDED", 
                method: "PUT", 
                pageState: action.page
            }); 

        default: 
            return state; 
    }
}

Answer 1

redux 中的操作可以由多个 reducer 处理。由于您的异步调用在调用结束时已经分派了 PUT_PAGE_SUCCEEDED 操作类型（以及之前的 PUT_PAGE_REQ），因此您不必分派另一个操作。像这样创建一个模态减速器：

const modalReducer = (state = false, action) => { 
        case 'SHOW_MODAL':
            return Immutable.fromJS({ 
                showModal: true
            });   
        case 'PUT_PAGE_SUCCEEDED': 
            return Immutable.fromJS({ 
                showModal: false
            }); 

        default: 
            return state; 
    }
}

并相应地更改mapStateToProps：

const mapStateToProps = (state, ownProps) => { 
    return { 
        pageState: state.pageState,
        modalState: state.modalState
    } 
} 

顺便说一句 - 我对 redux-saga 不是很熟悉，但我相信它与简单的 API 中间件在 API 调用生命周期中调度操作的方式没有什么不同。如果是……