Доступ к реквизитам.location объекта from redux-saga

Question

Моя конечная цель - получить доступ к this.props.location.pathname внутри редукционной саги при совершении вызовов API. Вот мое текущее рабочее решение, хотя и реагируя на ошибку. Я использую mxstbr/react-boilerplate-brand как свою кодовую базу.

В моем компоненте обертывания App у меня есть следующая строка в моем методе визуализации.

render() { 
    this.props.onUpdateLocation(this.props.location) 
} 

В моем mapDispatchToProps У меня есть следующее. В основном я просто экономия this.props.location в React магазине:

function mapDispatchToProps(dispatch) { 
    return { 
    onUpdateLocation: (location) => { 
     dispatch(updateLocation(location)); 
    }, 
    dispatch, 
    }; 
} 

Внутри моего redux-saga я доступ к хранилищу от государства и просто использовать его по мере надобности; однако, возникает ошибка React.

warning.js:44 Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`. 

я не могу поставить его в componentWillMount, потому что только увольняют один раз при запуске приложения, и я не могу поставить его в componentWillUpdate, потому что this.props.location обновляется в методе render. Я не могу положить его в componentDidUpdate, потому что уже слишком поздно.

Я просто пропустил какой-то простой очевидный способ доступа к местоположению реактивного маршрутизатора внутри моей саги о редуксе?

Answer 1

, если у вас есть <Route path='profile' component={ Profile } /> компонент профиля можно получить доступ к реагировать-маршрутизатор реквизита во втором аргументе ownProps из:

mapStateToProps(state, [ownProps]) и mapDispatchToProps(dispatch, [ownProps])

Answer 2

TL; DR:

export class App extends React.Component { 
    componentWillMount() { 
    this.props.onUpdateLocation(this.props.location.pathname); 
    } 
    componentWillReceiveProps(nextProps) { 
    this.props.onUpdateLocation(nextProps.location.pathname); 
    } 
    render() { 
    // Render stuff here 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    onUpdateLocation: (location) => { 
     dispatch(updateLocation(location)); 
    }, 
    dispatch, 
    }; 
} 

Мои редуктор получает действие и обновления location в состоянии. Теперь я могу получить доступ к текущему пути, используя селектор, который захватывает location из состояния.

Длинный ответ:

ответ ИГЛ является довольно хорошей информацией, особенно подстановочное именованием информации, которую можно использовать в маршрутах и ​​возвращаемый ownProps парами из mapDispatchToProps. Вот как я решил проблему ...

Первоначально я думал, что предупреждение было о доступе this.props.location или что-то еще; однако это была гораздо более простая проблема. Реакция не нравится, когда вы вызываете функцию без нее из-за действия, подобного щелчку. Предупреждающее сообщение, предлагающее решение, привело меня на правильный путь.

Прежде всего, чтобы увидеть, что срабатывало, когда и где, я поместил каждую из жизненных циклов React в свой код, ведение журнала консоли, когда они были удалены. componentWillMount, componentDidMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate, componentWillUnmount.

Я обнаружил, что componentWillMount уволен при загрузке начальной страницы, а componentWillReceiveProps уволен при каждой навигации. Имея это в виду, я завершаю регистрацию this.props.location и обнаружил, что componentWillReceiveProps все еще имел старое местоположение; однако требуется один параметр, nextProps, который имеет новое местоположение. так, nextProps.location - это то, что я хочу. Я разместил это в своем контейнере App, который принимает другие контейнеры в качестве своих дочерних элементов, и теперь я могу получить доступ к текущему местоположению в моих сагах, где я использую его для вызова API.