Реакт-Редукс Диспетчерский дизайн

Question

Обзор

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

ЧтоТехнически * сейчас происходит

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

class Page1Content extends Component {
}

function mapStateToProps(state) {
    return { selectedYear : state.userSelectedValue };
}

export default connect(mapStateToProps, null)(Page1Content);

Вопрос 1

Как обновятся данные на Page1Content?Несколько подходов:

1. В ComponentDidUpdate может быть вызван метод жизненного цикла API Page1Content для извлечения данных.Однако мы видели мнения, где следует избегать перехватов React и методов жизненного цикла с Redux.
2. В mapStateToProps можно вызывать API функции.

Кто-нибудь может подсказать, что лучше назвать API?

Вопрос 2

Данные о Page1Content будут использоваться только этой страницей.Эти данные не будут использоваться никаким другим компонентом и, следовательно, не должны использоваться другими компонентами.Теперь вопрос 2:

1. В случае, если мы решим использовать ComponentDidUpdate, должны ли мы снова отправить вызов API, используя Thunk или любую другую библиотеку, а затем снова перехватить ответ в mapStatesToProps?
2. Или мы должны сделать вызов API и разрешить его в самом компоненте как обещание.Тогда ответ будет установлен в состояние и соответствующий шаблон будет обновлен.

Answer 1

ComponentDidUpdate - это метод жизненного цикла, а не ловушка. Хуки - это функциональность, которая позволяет функциональным компонентам иметь функциональность на основе классов, такую ​​как состояние. В вашем примере вы используете компонент на основе классов, поэтому вы не используете хуки.

https://reactjs.org/docs/hooks-intro.html

Да Redux не должен использоваться с хуками, так как контекст является лучшим вариантом.

Вы можете поднять состояние, так сказать, и обновить локальное состояние в родительском компоненте, полностью избавившись от избыточности.

Просто передайте функцию setState и само состояние соответствующим дочерним элементам.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
               some_prop: false
             }
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({some_prop: true})
    console.log('Click happened');
  }
  render() {
    return (
     <Header onClick={this.handleClick } />
     <Page1Component props={this.state.some_prop} />
  }
}

Редактировать:

Вопрос 1

Как будут обновляться данные на Page1Content?

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

  render() {
    return (
      <div>
        {this.props.selectedYear
           ? <p> {this.props.selectedYear}</p>
           : null 
         }
      </div>       

  }
}

Вопрос 2

Данные на Page1Content будут использоваться только этой страницей. Эти данные не будут использоваться никаким другим компонентом и, следовательно, не должны использоваться другими компонентами. Теперь вопрос 2

Если я правильно понимаю, вам нужно будет использовать создателей действий, избыточный толчок здесь излишним.

class Header extends Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    this.props.dispatchActionCreator({some_value})
    console.log('Click happened');
  }
  render() {
    return (
      <button onClick={(some_value) => this.handleClick(some_value)}>Click </button>
  }
}

function mapDispatchToProps(state) {
    return { 
       dispatchActioNCreator: (some_value) => dispatch(ACTIONS.action_creator(some_value) };
}

Это сохранит ваше значение из вашего заголовка в глобальное состояние избыточности, а затем вы можете просто получить доступ с mapStateToProps в вашем Page1Component.