Блог

Я пытаюсь исследовать, как отправлять действие в одном случае с параметрами и без ‘init()’, когда произошло componentDidMount. Проблема здесь в том, что у меня есть две страницы, 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 — сброс состояния между другими страницами — не сбрасывать состояние при перезагрузке окна

Обзор компонента

 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,
            }
    })