Является ли использование Redux с Next. js анти-паттерном? - PullRequest
Новая
       43

Является ли использование Redux с Next. js анти-паттерном?

1 голос
/ 11 марта 2020

Я создаю приложение Next. js, и в настоящее время оно использует Redux. Поскольку я строю его, я задаюсь вопросом, действительно ли необходимо использование Redux, и является ли его использование на самом деле анти-паттерном. Вот мои рассуждения:

Чтобы правильно инициализировать Redux Store в Next. js, вы должны создать пользовательский компонент App с методом getInitialProps. Делая это, вы отключаете Automati c Stati c Оптимизация , что Next. js обеспечивает.

В отличие от этого, если бы я включил Redux на стороне клиента, только после монтирования приложения хранилище Redux будет сбрасываться после каждой навигации на стороне сервера. Например, у меня есть приложение Next. js, которое инициализирует хранилище Redux на стороне клиента, но при маршрутизации на динамический маршрут c, такой как pages/projects/[id], страница отображается на стороне сервера, и мне нужно повторно - получить любую информацию, которая была в магазине.

Мои вопросы:

  1. Каковы преимущества магазина Redux в этих обстоятельствах?
  2. Стоит ли инициализировать хранилище в компоненте root App, а перед go в Automati c Stati c Оптимизация?
  3. Есть ли лучший способ сделать управлять состоянием в Next. js 9.3 с помощью getStaticProps и других методов извлечения данных
  4. Я что-то упустил?

1 Ответ

3 голосов
/ 11 марта 2020

Если у вас есть пользовательское приложение с getInitialProps, то автоматическая оптимизация Stati c, которая Next. js будет отключена для всех страниц.

True, если вы следуете этот подход.

Есть ли лучший способ?

Да, вы можете создать провайдера Redux в качестве оболочки и обернуть нужный вам компонент, контекст редукции будет автоматически инициализируется и предоставляется в этом компоненте.

Пример: 

const IndexPage = () => {
  // Implementation
  const dispatch = useDispatch()
  // ...
  // ...
  return <Something />;
}

IndexPage.getInitialProps = ({ reduxStore }) => {
  // Implementation
  const { dispatch } = reduxStore;
  // ...
  // ...
}

export default withRedux(IndexPage)

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

Отвечая на ваш вопрос " Использует ли Redux с Next. js анти-шаблон? "

Нет, но его нужно использовать правильно.

Подробнее о том, как это сделать, можно узнать здесь: https://github.com/zeit/next.js/tree/canary/examples/with-redux

Надеюсь, это поможет

...