Как перейти в состояние Redux с помощью кнопки возврата в браузере

Я начинаю реагировать, и у меня есть проект, использующий React Router (4.2.2), Redux, и я недавно добавил response-router-redux в надежде, что это решит мою проблему. У меня есть компоненты, чьи сохраненные состояния redux необходимо изменить в зависимости от взаимодействия с кнопками назад и вперед в браузере.

Например, у меня есть экран, содержащий подробную информацию об элементе, который щелкнул пользователь. Если я использую кнопку "Назад" в браузере и перехожу к другому моменту в истории, в котором было открыто это подробное представление, будет отображаться только самая последняя информация об элементе (из-за этого единственная информация в магазине) или иногда никакая информация не будет отображаться. прошедший.

Я думал, что response-router-redux поможет мне синхронизировать эти два, но, возможно, мне не хватает шага, который позволяет этому случиться. Я установил Redux Debug Tools и вижу там состояние, в которое хочу перейти, но как мне включить его, когда пользователь нажимает кнопку «Назад»? URL-адрес страницы сведений остается неизменным при каждом просмотре. Возможно, мне нужно добавить хэш-тег с конкретной информацией, но даже в этом случае, как мне найти правильную информацию в магазине?

Я открываю подробное представление вот так:

<Link to='/activityDetails'>
       <ActivityButton 
           id={this.props.someData.someId}
       />
</Link>

И внутри ActivityButton:

openActivityDetails = () => {
    this.props.showActivityDetailsScreen(this.props.id);
};

function matchDispatchToProps(dispatch) {
    return bindActionCreators({
        showActivityDetailsScreen: activityDetailsActions.showActivityDetails
    }, dispatch)
}

render(){
    return (
        <div className={'activity-button'} onClick={this.openActivityDetails}>
            <img
                onClick={this.handleClick}
                src={imgPath}
            />
        </div>
    );
}

reactjs redux react-router react-router-redux
person nepps    schedule 16.02.2018    source источник
comment
Где вы делаете призыв к действию?   -  person MEnf    schedule 16.02.2018
comment
@MEnf Добавлен код, показывающий, как запускается экран. Само действие имеет только идентификатор и логическое значение, чтобы указать, открыто ли представление (используется другими экранами).   -  person nepps    schedule 17.02.2018
comment
Пожалуйста, не добавляйте решение к вашему вопросу. Если вы нашли наиболее подходящее для вас решение, вы можете принять его ниже или ответить на свой вопрос. Этот сайт предлагает множество решений от других пользователей, так как то, что лучше всего сработало для вас, может не подойти кому-то другому. Ваш вопрос был возвращен в предыдущее состояние. Для получения дополнительной информации посетите справочный центр.   -  person K.Dᴀᴠɪs    schedule 03.03.2018

Ответы (1)


arrow_upward
3
arrow_downward

Так что я разобрался сам. По сути, вам нужно установить информацию о состоянии внутри, когда вы ее создаете, например:

<Link to={{
    pathname: '/activityDetails',
    state: { "activityData": activityData }
}}>
    <ActivityButton 
        id={this.props.someData.someId}
    />
</Link>

то в классе вам нужна информация ActivityDetails, в моем случае вы можете запросить ее следующим образом:

 var actData = this.props.location.state.activityData;

или, если вы используете withRouter и history, он также находится в следующем месте:

const { history: { push } } = this.props;
history.state.state.activityData

В итоге я удалил response-router-redux, потому что в этом не было необходимости. Он сделал запись в состоянии с текущим маршрутом, но в моем случае это было бесполезно. Надеюсь, это поможет кому-то в будущем.

person nepps    schedule 05.03.2018
comment
Для будущих читателей: имейте в виду, что в состоянии истории можно хранить только сериализуемые данные. Нет экземпляров классов, свойств даты, функций и т. Д. - person elMeroMero; 25.02.2021