it-roy-ru.com

React Redux использует HOC с подключенным компонентом

Я нахожусь в середине моего первого проекта React Native. Я хотел бы создать HOC, который занимается исключительно синхронизацией данных из API. Это тогда обернет все мои другие компоненты.

Если я прав, мой компонент DataSync улучшит все остальные компоненты, выполнив в операторе экспорта следующее:

export default DataSync(SomeOtherComponent);

Концепция, с которой я борюсь, заключается в том, что SomeOtherComponent также зависит от метода React Redux Connect для получения другого состояния избыточности. У меня вопрос, как я могу использовать оба вместе? Что-то вроде этого?

export default DataSync(connect(mapStateToProps, mapDispatchToProps)(SomeOtherComponent));

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

Правка

Чтобы объяснить дальше:

Мой DataSync HOC будет просто обрабатывать синхронизацию данных между приложением и будет компонентом верхнего уровня. Ему понадобится доступ к состоянию авторизации и будут установлены данные в Redux (в данном случае порядок) для всех других компонентов.

Компонентам, вложенным в HOC DataSync, необходим доступ к извлеченным данным, маршрутам, и они, в свою очередь, создают состояние (заказы), которые должны периодически синхронизироваться с сервером.

9
mtwallet

Может быть, это то, что вы хотели:

DataSync.js

export default connect(mapStateToProps, mapDispatchToProps)(DataSync);

SomeOtherComponent.js

export default DataSync(connect(mapStateToProps, mapDispatchToProps)(SomeOtherComponent));

Используйте connect также на ваших дочерних компонентах. Вот ПОЧЕМУ

9
free-soul

Вот простой пример того, как это работает

const AppWrapper = MainComponent =>
  class extends Component{
    componentWillmount(){
      this.props.fetchSomething()
    }
    componentDidUnmount(){
      this.props.Push('/')
    }
    render(){
      return (
        <div>
          {this.props.fetchedUsers === 'undefined' ? 
            <div> Do something while users are not fetched </div> :
            <MainComponent {...this.props}/>}
        </div>
      )
    }
  }



const App = ({users}) => {
  // just example, you can do whatever you want
  return <div>{JSON.stringify(users)}</div>
};

// mapStateToProps will be in HOC -> Wrapper
// mapDispatchToProps will be in HOC -> Wrapper

/* you may use DataSync as you want*/
export default connect(mapStateToProps, mapDispatchToProps)(AppWrapper(App))

Полезно HOC ссылка

12
The Reason

Да, connect также HOC, и вы можете вкладывать их произвольно, так как HOC возвращает компонент.

HOC(HOC(...(Component)...)) в порядке.


Однако я думаю, что вам может понадобиться connect(...)(DataSync(YourComponent)) вместо DataSync(connect(...)(YourComponent)), чтобы DataSync мог также получить доступ к state/props при необходимости. Это действительно зависит от варианта использования.

5
Lyubomir

Я использую и люблю тот же подход, который упоминал @The Reason. Единственная проблема здесь в том, что если вы отобразите свои действия, у вас не будет dispatch ().

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

const ConnectedComponentWithActions = connect(
  () => { return {}; },
  { myAction },
)(ViewComponent);

export default connect(
  state => state,
  null,
)(withPreFetch(firstLoadAction, ConnectedComponentWithActions));

Где withPreFetch(firstLoadAction, ConnectedComponentWithActions) - HOC, принимающий действие для отправки.

0
Ventura