Перезагрузка URL в браузере в приложении React с использованием Redux и маршрутизатора React, приводящая к тому, что состояние хранилища не определено

#reactjs #react-redux #react-router-v4

Вопрос:

Я использую create-react-app с react-redux и react-router.

<SingleProduct /> определяется как таковой

 function SingleProduct(props){
let id=  props.match.params.id
let products = props.products
return (display the matching product properties)
}

При <SingleProduct /> рендеринге он полагается на идентификатор, полученный через маршрутизацию.
Затем он выполняет поиск идентификатора внутри props.products , чтобы получить конкретные свойства продукта.
<SingleProduct /> подключен к хранилищу redux следующим образом:

 function mapStateToProps(state){
return {
products: state.products}
}

Когда я обновляю браузер, props.products больше не распознается, и я получаю ошибки при попытке прочитать свойства undefined.

Как я могу решить эту проблему? Это проблема маршрутизации (маршрутизация на стороне клиента) или что-то еще? Я извлек свое приложение, попытался настроить конфигурацию Webpack для решения проблемы маршрутизации на стороне клиента, но это не сработало. Пожалуйста, обратите внимание, что я извлекаю продукты через REST API. Приветствуется любая помощь.

1. можете ли вы вставить точную ошибку? вероятно, вам просто нужно проверить, существует ли props.products , прежде чем пытаться получить доступ к его свойствам. не уверен, что вы думали, что состояние будет сохраняться при обновлении страницы, но это не так без использования какого-либо механизма хранения, такого как localStorage

2. кроме того, добро пожаловать в stackoverflow! всегда лучше, если вы потратите время на форматирование своего кода в questions. например, вам не хватает закрывающей фигурной скобки в mapStateToProps . предположительно, этого нет в вашем реальном коде, иначе он не компилировался бы. пожалуйста, отредактируйте свой вопрос, чтобы исправить это

3. исправлен код @azium. Спасибо. Да, я не знал, что состояние не сохраняется при обновлении, и я не сталкивался с этой проблемой при чтении руководств и документации по React и redux. Я новичок в этом, и собрать всю эту головоломку не всегда легко. В любом случае я рассмотрю это. Приветствуются любые предложения.

4. @azium есть идеи о том, как действовать, когда вы вводите URL непосредственно в браузере, а состояние не сохраняется в localStorage. Например, когда вы делитесь URL (продуктом) с кем-то. они нажимают на него, и страница продукта должна загрузиться после получения правильных данных. Спасибо.

Ответ №1:

вам необходимо использовать localstorage или redux-persist в вашем проекте, чтобы сохранить сохраненные данные о состоянии после перезагрузки URLhttps://www.npmjs.com/package/redux-persist

1. Спасибо. Это решило часть моей проблемы, которая связана с перезагрузкой. Однако вторая часть касается ввода URL непосредственно в браузере, когда состояние еще не сохранено в локальном хранилище.