Question

我尝试研究如何在有componentDidMount发生的情况下，在有参数且没有'init（）'的情况下分派动作。这里的问题是我有两页， overview和子路由器页面edit 当我在这两个页面之间切换时，我需要保持状态，在window重新加载时，我需要重置状态。从子页面移开时，我使用react-router-dom this.props.history({pathName: 'overview', state: LATES props I have from overivew})

init发生在我的HOC上

export default WrappedComponent => class Initializable extends Component {
    componentDidMount = () => this.props.init()

    render = () => <WrappedComponent {...this.props} />
}

预期的解决方案：以某种方式进行“路由器路径跟踪”，并仅对某些路由保持状态。或者在从edit切换到overview时以某种方式处理状态，但请保留以作概述。或添加一些windows.reload reducer。

有什么主意吗？

预期行为： -在重新加载窗口时重置状态

当前行为：在edit和overrivew之间切换时保持-keep状态 -重置其他页面之间的状态 -不要在重新加载窗口时重置状态

概述组件

export class Overview extends Component {
//just for example
    <div>
    this.props.patients
    this.props.search
    this.props.sort
    ....
    </div>
}
export const mapStateToProps = state => ({
    patients: state.patients,
    sort: state.patients.sort,
    search: state.patients.search,
})
export const mapDispatchToProps = (dispatch, {location: {state = {}}}) => ({
        init: () =>  dispatch(PatientActions.load(state)),
    })

编辑组件

export class Editextends Component {
//just for example

returnToList = () => this.props.history.push({pathname: '/overview', state})
    <div>
    <Button onClick={this.returnToList}>
    this.props.patients
    ....
    </div>
}
export const mapStateToProps = state => ({
    patients: state.patients,
})

PatientActions操作

 const load = ({accessToken, ...params} = {}) => async dispatch => {
        dispatch({
            type: PatientActions.LoadingStarted,
        })

        let response = await api.load({accessToken, ...params})

        dispatch({
            type: PatientActions.ListLoaded,
            response,
        })

        return response
    }

患者减少器

 export default (actionTypes, initialState = {}) => (state = {
    sort: undefined,
    pageSize: undefined,
    ...initialState,
}, action) => {
    switch (action.type) {
        case actionTypes.ListLoaded:
            let filter = filterSelector({
                ...action,
                sort: action.sort || initialState.sort,
                search: action.search || initialState.search,
            })
            let {response: {result: {totalCount, list}}} = action
            return {
                ...state,
                ...filter,
            }

        case actionTypes.LoadingStarted:
            return {
                ...state,
                isLoadingInProgress: true,
            }
    })

在重新加载窗口时重置状态redux

0 个答案: