React Redux use HOC с подключенным компонентом

Question

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

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

export default DataSync(SomeOtherComponent);

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

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

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

EDIT

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

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

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

Answer 1

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

DataSync.js

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

SomeOtherComponent.js

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

Использование connect на ваших дочерних компонентов, а также.Вот WHY

Answer 2

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

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

---

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

Answer 3

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

const AppWrapper = MainComponent => 
    class extends Component{ 
    componentWillmount(){ 
     this.props.fetchSomething() 
    } 
    componentDidUnmount(){ 
     this.props.push('/') 
    } 
    render(){ 
     return (
     <div> 
      {this.props.fetchedUsers === 'undefined' ? 
      <div> Do somethig 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 ссылки

Надеется, что это поможет вам

Update: исправить опечатку

Answer 4

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

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

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

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

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