Понимание HOC с Redux - PullRequest
Новая
       33

Понимание HOC с Redux

0 голосов
/ 08 сентября 2018

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

это мой HOC: 

const Loading = (propName) => (WrappedComponent) => {
  return class extends React.Component{
    render(){
      return this.props[propName].length === 0 ? <div> Loading... </div> : <WrappedComponent {...this.props} />
    }
  }
}

export default Loading;

внизу моего пользовательского компонента у меня есть это: 

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Loading('users')(Users));

В настоящее время слово Loading... просто остается на экране. и propName приходит как undefined

Я думаю, по какой-то причине пользовательский компонент никогда не заполняется. что я сделал не так?

1 Ответ

0 голосов
/ 08 сентября 2018

Обновление после комментариев

Мой ответ ниже вводит в заблуждение, так как в то время я не правильно понял ваше намерение. Кроме того, мое объяснение о том, как не получить props, как-то не так. Это правда, если мы не визуализируем компоненты, но здесь вы делаете это. Итак, проблема была не в этом.

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

  • Вы экспортируете функцию HOC, а не упакованную здесь. Он приходит из вашего Users файла, но не экспортирует настоящий компонент Users. Это важно.
  • Ваш родитель отображает первый раз, и он экспортирует экспортированный компонент HOC.
  • Ваш дочерний компонент отрисовывается и попадает в Loading один, а не Users один.
  • В Loading ваша users опора пуста, поэтому вы видите Идет загрузка ... .
  • Ваш Users компонент никогда не рендерится снова. Таким образом, выборка пользователей не обновляет состояние.

Ваше решение извлекает извлечение из Users и подает этот компонент. Вероятно, в родительском. Итак:

  • Родитель выбирает пользователей, затем отображает себя и всех своих дочерних элементов.
  • Ваш Loading компонент HOC визуализируется второй раз.
<ч />

Я не знаю, как вы планируете использовать этот HOC, но если я правильно понял (поскольку у меня нет такого опыта работы с HOC), в вашем случае проблема в том, что вы не передаете prop в Loading функция. Это потому, что вы не используете его как обычный компонент здесь. Это функция, а propName здесь просто аргумент.

Когда мы визуализируем функцию без состояния, подобную этой: 

<Loading propName="foo" />

тогда для нашей функции будет аргумент props. Если мы не будем отображать это так, не будет аргумента props и props.propName. Если это не так, пожалуйста, исправьте это и объясните правильную логику. Итак, вы хотите сделать что-то вроде этого, вероятно: 

class App extends React.Component {
  render() {
    return (
      <div><FooWithLoading /></div>
    );
  }
}

const Loading = (users) => (WrappedComponent) => {
  return class extends React.Component {
    render() {
      return (
        users.length === 0 ? <div> Loading... </div> :
        <WrappedComponent
          users={users}
        />
      );
    }
  }
};

const Foo = props => {
return (
  <div>
    Users: {props.users}
  </div>
);
}

const FooWithLoading = Loading("foobar")(Foo);

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Так что в вашем случае: 

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Loading('users')(Users));

должно работать?

Или вам нужно правильно визуализировать ваш компонент в подходящем месте вашего приложения.

...