MapStateToProps к состоянию компонента в контексте syn c

Question

Я знаю, что мы можем легко отправить содержимое mapStateToProps в состоянии компонента, сделав так:

constructor(props){
  super(props);

  this.state = {
     filteredApps: this.props.apps
  }
}

В этом сценарии использования this.state.filteredApps заполняется тем, что было сопоставлено с реквизитами из Redux.

Но что, если this.props.apps правильно заполнится только после асинхронного c вызова? В асинхронном c контексте this.props.apps, вероятно, будет пустым массивом, когда он инициализируется, пока не будут получены реальные данные. Возьмите это в качестве примера:

class AppFilterer extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      filteredApps : this.props.apps
    }
  }

  componentWillMount() {
      this.props.getApps();
  }

  render(){ return <div> </div> }

}

const mapStateToProps = state => {
   let { apps } = state.Admin;
   return { apps };
};

export default connect(mapStateToProps, { getApps })(AppFilterer);

В этом случае мое действие Redux (которое перехватывает сага) this.props.getApps(); - это вызов, который заполняет мои props полными приложений и вызывается из componentWillMount функция. Он инициализируется как пустой массив, а затем заполняется приложениями после завершения вызова.

Я хочу sh отфильтровать эти приложения после их извлечения из API, поэтому хочу поместить их в состояние моего компонента, чтобы не связываться с состоянием Redux. Какова наилучшая практика для обновления состояния компонента в этом случае? Другими словами, есть ли способ взять результат саги, который был сопоставлен с реквизитом, и установить его в состояние компонента, или я ищу странный шаблон и должен отфильтровать его каким-то другим способом?

Answer 1

Прежде всего вызовы API go в componentDidMount, а не в componentWillMount, что также не рекомендуется. Пожалуйста, обратитесь к этому руководству:

https://reactjs.org/docs/react-component.html

Во-вторых, когда вы используете избыточное состояние и отображаете его в реквизиты, вы не должны устанавливать что в вашем компоненте локальное состояние, это не очень хорошая практика. Вы получите обновленные реквизиты, когда ваше обещание вернется, и вы всегда можете положиться на реквизиты в этом сценарии.

Но если вы все еще хотите это сделать, вы можете переопределить componentDidUpdate(prevProps), который будет вызываться, когда ваши реквизиты или состояние обновлено. Здесь вы можете установить свое состояние, если вы все еще хотите это сделать.

Примечание для вашего фильтра

Вы можете выполнить фильтрацию в методе componentDidUpdate следующим образом: this.setState({filteredApps. this.props.apps.filter(<your filter logic>)})