React Context API - сохранить данные при обновлении страницы

Question

Допустим, у нас настроен поставщик контекста вместе с некоторыми начальными значениями свойств данных.

Где-то вдоль линии, скажем, потребитель изменяет эти свойства.

При перезагрузке страницыэти изменения потеряны.Каков наилучший способ сохранить данные, чтобы мы могли сохранить эти изменения данных?Любой метод, кроме простого локального хранилища?

Answer 1

Контекст не сохраняется так, как вы хотите.Вот пример того, что я сделал, используя функционал без состояния с перехватчиками React.

import React,  {useState, useEffect} from 'react'

export function sample(){
  // useState React hook
  const [data, setData] = useState({})
  const [moreData, setMoreData] = useState([])

  // useState React hook
  useEffect(() => { 
    setData({test: "sample", user: "some person"})
    setMoreData(["test", "string"])
  }, [])

  return data, moreData
}

export const AppContext = React.CreateContext()

export const AppProvider = props => (
  <AppContext.Provider value={{ ...sample() }}>
    {props.children}
  </AppContext.Provider>
)

С самого начала поймите, что это обходной путь, а не постоянное решение.Постоянные данные - это работа базы данных, а не клиента.Однако, если вам нужны постоянные данные для разработки, это один из способов.Сначала обратите внимание, что я использую React hooks .Это полностью поддерживаемая функция с 16.8.useEffect() заменяет методы жизненного цикла, найденные в объявлениях классов, подобных описанным выше в TLadd.Он использует componentDidUpdate, чтобы упорствовать.Самый современный способ сделать это - useEffect.Когда приложение обновляется, этот метод вызывается и устанавливает некоторые жестко закодированные данные в контексте.

Чтобы использовать провайдера:

import React from 'react'
import Component from './path/to/component'
import { AppProvider } from './path/to/context'

const App = () => {
  return (
    <AppProvider>
      <Component />
    </AppProvider>
  )
}

При обновлении data и moreData по-прежнему будут иметь любые значения по умолчанию, которые вы им назначите.

Answer 2

Да, если вы хотите, чтобы данные сохранялись при перезагрузке, ваши варианты будут хранить эту информацию на стороне сервера (через вызов API) или в хранилище браузера (локальное хранилище, хранилище сеансов, файлы cookie).Вариант, который вы хотите использовать, зависит от того, какой уровень настойчивости вы хотите достичь.Независимо от выбора хранилища, он будет выглядеть примерно так:

const MyContext = React.createContext(defaultValue);

class Parent extends React.Component {
  setValue = (value) => {    
    this.setState({ value });
  }

  state = {
    setValue: this.setValue,
    value: localStorage.getItem("parentValueKey")
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.value !== prevState.value) {
      // Whatever storage mechanism you end up deciding to use.
      localStorage.setItem("parentValueKey")
    }
  }

  render() {
    return (
      <MyContext.Provider value={this.state}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}