Вопрос по reactjs, react-native, redux, javascript, react-redux – React Redux использовать HOC с подключенным компонентом

10

Я нахожусь в середине моего первого проекта 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, необходим доступ к извлеченным данным, маршрутам, и они, в свою очередь, создают состояние (заказы), которые должны периодически синхронизироваться с сервером.

да, это должно работать Dominic

Ваш Ответ

4   ответа
12

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

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 ссылка на сайт

Можете ли вы сделать это с помощью декоратора подключения вместо этого синтаксиса? Joe Lloyd
5

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

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

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

Спасибо за ответ. Так в сущности, какой способ их вкладывания определяет данные, наследуемые компонентами? Это работает так же, как любые другие компоненты связи? mtwallet
не могли бы вы подробнее рассказать о своем вопросе? DataSync наследует только от connect, если он вложен в connect. Каждый вложенный HOC1 наследуется от каждого внешнего HOC2,3,4 .. над ним. HOC3 (HOC2 (HOC1)) Теперь HOC1 наследуется от HOC2 и HOC3. Lyubomir
9

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

DataSync.js

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

SomeOtherComponent.js

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

использованиеconnect на ваших дочерних компонентов, а также. ВотЗАЧЕМ

0

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

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

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

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

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

Похожие вопросы