Создание многоразовой оболочки Redux - PullRequest
Новая
       25

Создание многоразовой оболочки Redux

1 голос
/ 10 мая 2019

Я работаю над проектом RoR, в котором используются webpacker и Reaction-Rails. Мы медленно отходим от Хамла, чтобы Реагировать. Из-за этого каждая страница, которую мы делаем react_component('page_to_render') Мы также используем Redux, и я вызывал свой компонент непосредственно в провайдере, и он работал нормально. Из-за способа, которым мы используем это, каждая страница в каком-то смысле будет собственным приложением React, я пытаюсь создать повторно используемый компонент для прохождения хранилища. Моя мысль была следующей: 

import React, { Component } from 'react'
import { Provider } from 'react-redux'

import store from './store'

class ReduxState extends Component {
  render() {
    return (
      <Provider store={store}>
        {this.props.children}
      </Provider>
    )
  }
}
export default ReduxState

Так что для каждой страницы нам просто нужно обернуть ее в <ReduxState></ReduxState>, но когда я делаю это, я получаю:

Could not find "store" in the context of "Connect(BillingPage)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(BillingPage) in connect options.

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

1 Ответ

0 голосов
/ 10 мая 2019

После прочтения моих ошибок я понял, что возвращаю провайдера в JSX и что сам класс BillingPage не имеет ссылки на ReduxState

Я понял, что мне нужен HOC. Решение ниже: 

import React, { Component } from 'react'
import { Provider } from 'react-redux'

import store from './store'

const ReduxState = WrappedComponent => {
  return class extends Component {
    render() {
      return (
        <Provider store={store}>
          <WrappedComponent {...this.props} />
        </Provider>
      )
    }
  }
}

export default ReduxState

const composedHoc = compose(
  ReduxState,
  connect(
    mapStateToProps,
    {
      addBill,
      removeBill
    }
  )
)

export default composedHoc(BillingPage)
...