Реагировать - можно ли хранить состояние в отдельном файле? - PullRequest
Новая
       38

Реагировать - можно ли хранить состояние в отдельном файле?

1 голос
/ 10 июля 2020

Я новичок в React, поэтому приношу свои извинения за то, что ответил на вопрос, который может быть глупым или c.

Является ли разумным и работоспособным решением сохранить состояние по умолчанию во внешнем файле?

Итак, если у меня есть контейнер приложения, подобный этому: - 

import React, { Component } from 'react';
import Spy from '../spies/weather/Spy';
import Local from '../local/Local';
import './app.css';
import { state } from './state'

class App extends Component {

  constructor() {
        super()
        this.state = state
  }

  onLocationChange = event => {
    this.setState({ location: event.target.value })
    }       
  setWeather() {
    //this.setState( { weather: { weather }});
    console.log(`this is ${this}`);
  }



  render() {
    return (
      <React.Fragment>
        <Local locationChange={this.onLocationChange}/>
        <Spy location={this.state.location} setWeather={this.setWeather}/>
      </React.Fragment>
    );
  }
}

export default App;

и состояние. js файл, подобный этому: - 

export const state = {
    location: '',
    weather: {}
};

Очевидно, он работает нормально у моего дочернего компонента «Local» есть событие OnChange, которое обновляет свойство местоположения состояния, четко видимое в инструментах React Dev. Все, что я видел до сих пор, имеет состояние в родительском контейнере или использовал Redux, что я мог бы сделать, если смогу разобраться в React.

Мне сразу понадобился совет о том, как управлять масштабируемостью в том, что может стать монстром-контейнером приложений с множеством функций, но особенно массивным объектом состояния с довольно непонятными значениями по умолчанию. Еще больше? Это замедляет работу или создает проблемы?

Спасибо!

Фил

1 Ответ

1 голос
/ 10 июля 2020

React действительно гибок, когда дело касается структуры проекта. Я видел подобное решение в прошлом. Если это хорошо для Вас, то я думаю, что это не "плохая практика" - хранить его в отдельном файле.

Взгляните сюда:

https://en.reactjs.org/docs/faq-structure.html

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

Другой распространенный подход - наличие «компонента оболочки», который будет отвечать за сохранение и передачу состояния, которое совместно используется несколькими компонентами. Простые части состояния, относящиеся только к одному конкретному компоненту, могут храниться внутри этого компонента как состояние уровня компонента.

Надеюсь, это каким-то образом ответит на ваш вопрос.

...