Как обновить страницу в React

Как обновить страницу

Чтобы обновить страницу (сделать refresh страницы), нам нужно использовать метод window.location.reload() в React. По умолчанию этот метод перезагружает страницу из кэша, если мы передаем true в качестве аргумента, он перезагружает всю страницу с сервера, а не с кэша. Рассмотрим пример:

import React from "react";

function Home() {
  const refreshPage = ()=>{
     window.location.reload();
  }

  return (
    <div>
      <h1>{Math.random()}</h1>
      <button onClick={refreshPage}>Refresh</button>
    </div>
  );
}

В приведенном выше коде мы обновляем страницу, нажимая на кнопку refresh.

Обновление компонента

Если требуется обновить конкретный компонент, а не всю страницу, необходимо вызвать метод this.setState() с пустым объектом для классовых компонентов.

import React from "react";

class App extends React.Component {

  handleRefresh = () => {
    // вызов этого метода вызовет ререндер компонента
    this.setState({});
  };

  render() {
    return (
      <div>
        <h1>{Math.random()}</h1>
        <button onClick={this.handleRefresh}>Refresh component</button>
      </div>
    );
  }
}

export default App;

Передав пустой объект {} в функцию изменения состояния, react будет думать, что что-то обновлено в состоянии, и компонент необходимо обновить (или повторно отобразить) с новым UI.

Обновление компонента с помощью хуков

В react hooks мы можем использовать useState() для обновления компонента.

import {useState} from "react";

function Home() {

  const [value,setValue] = useState();

  const refresh = ()=>{
      // это вызовет ререндеринг компонента
     setValue({});
  }

  return (
    <div>
      <p>{Math.random()}</p>
      <button onClick={refresh}>Refresh component</button>
    </div>
  );
}

1. Все что нужно знать о Redux

Это видео - быстрый старт в Redux, и оно поможет понять все основные концепции Redux. Здесь мы разберем что такое Redux, основные понятия Redux и три его принципа. Поговорим об Actions, Dispatch, Reducer, Store и узнаем о Redux data flow. Смотреть на Rutube

2. Добавляем Redux в React приложение быстро: useSelector, useDispatch

В этом видео добавляем Redux в ReactJS приложение todo app. Пишем редьюсеры (reducers) и диспатчим экшены (dispatch actions). Используем redux hooks API, такие как useSelector, useDispatch. Смотреть на Rutube

3. Что такое Action Creator в Redux?

В этом видео пишем action creators в React Redux приложении и используем их в dispatch. Пишем функцию для создания action creators. Смотреть на Rutube

4. Что такое Redux Middleware?

В этом видео разбираем middleware в Redux. Пишем кастомные middleware для логирования и отложенного выполнения действия. Смотреть на Rutube

5. Функция next в Redux Middleware

В этом видео подробно разбираем функцию next в middleware Redux, смотрим как получить значение возвращенное из dispatch и пишем функцию для получения значений всех middleware. Смотреть на Rutube Исходный код