Сохраняйте данные между двумя страницами с помощью Next. js - PullRequest
Новая
       106

Сохраняйте данные между двумя страницами с помощью Next. js

4 голосов
/ 30 мая 2020

Я хотел бы провести рефакторинг своего Next. js webapp, чтобы разные страницы обрабатывали разные экраны. В настоящее время у меня есть этот компонент, поддерживающий несколько состояний, чтобы знать, на каком экране я нахожусь. В разделе jsx я использую {value && ... } для рендеринга нужного компонента.

Но я считаю, что это не очень хорошо дизайн, и не будет обслуживаться при добавлении все большего количества экранов.

Я также хотел бы избежать Redux, так как это избыточно для моего проекта.

Я думал о сохранении данных в файлах cookie поэтому я могу получить их с помощью getInitialProps в каждом компоненте при рендеринге новой страницы, но есть ли более элегантный способ?

Я читал о настройке _app.js, но не уверен, что понимаю последствия о том, как это сделать, и как это может мне помочь ..

Есть предложения?

1 Ответ

4 голосов
/ 30 мая 2020

Когда нескольким вашим страницам необходимо использовать одни и те же данные, вы можете использовать Context для сохранения результата. Это хороший способ создать централизованное хранилище без использования сложных и более самодостаточных библиотек, таких как redux

. Вы можете реализовать контекст внутри файла _app. js, который должен находиться внутри вашей папки root. Следующий путь. js рассматривает его как оболочку root, и вам просто нужно будет использовать 1 экземпляр Context

context / appContext 

import React from 'react';
const AppContext = React.createContext();
export const AppProvider = AppContext.Provider;
export const AppConsumer = AppContext.Consumer;
export default AppContext;

_app. js

import React from 'react'
import App from 'next/app'
import AppProvider from '../contexts/appContext';
class MyApp extends App {
  state={
    data:[]
  }
  render() {
    const { Component, pageProps } = this.props;
    // You can implement logic in this component to fetch data and update state
    return (
      <div>
        <AppProvider value={this.state.data}> // pass on value to context
          <Component {...pageProps} />
        </AppProvider>
      </div>
    )
  }
}
export default MyApp

Теперь каждый компонент может использовать значение контекста, используя AppConsumer или используя useContext, если вы используете хуки

Подробнее о том, как использовать Context, можно прочитать здесь

...