Блог

Я пишу простую коллекцию блогов. У меня есть новейший react-router и react-redux. У меня есть все блоги в моем магазине. Когда я перехожу на одну страницу блога, сначала все работает нормально, но когда я обновляю браузер или ввожу динамический URL-адрес прямо в адресную строку, данные компонента теряются. Какой тип хука я должен использовать для извлечения данных? У меня есть только это в моем одиночном блоге для извлечения данных:

  const id = useParams().id
 const blog = useSelector(state => state.blogs.find(b => b.id === id))
  

Когда вы обновляете браузер, все ваше приложение перезапускается, включая ваше состояние, в котором хранятся данные.

Если вы хотите сохранить данные даже после обновления браузера, вам следует сохранить свои данные в localStorage и изменить код так, чтобы он получал состояние из данных, сохраненных в localStorage .

Как вы могли бы это сделать:
Когда вы извлекаете данные

 ...
// Where data is the variable that holds your fetched data
localStorage.setItem('data_array', JSON.stringify(data));
  

В редукторе блога

 ...
// Instead of having the initial state as empty array `[]`, you make it equal
// to whichever data is stored in the localStorage. Because if the localStorage
// have no data, it will still return an empty array `[]`
const initialState = JSON.parse(localStorage.getItem('data_array'));

export function blogReducer(state = initialState, action) {
  switch (action.type)
  ...
}
  

На странице блога

 ...
// You keep blog const as it is since we took care of the localStorage in
// the reducer
const blog = useSelector(state => state.blogs.find(b => b.id === id))
...
  

Краткое примечание:
Вы не должны полагаться на обновление браузера для получения нового сообщения в блоге / данных. Однако вы могли бы использовать setInterval() для отправки запроса на выборку каждый x раз, чтобы узнать, есть ли какие-либо новые записи / данные, или вы могли бы добавить кнопку обновления в свое приложение, которая запускает запрос на получение любых новых данных