创建可重用的 Redux 包装器

Question

我正在开发一个使用 webpacker 和 react-rails 的 RoR 项目。我们正在慢慢地从 haml 转向 React。因此，我们正在做的每个页面 react_component('page_to_render') 我们也在使用 Redux，我一直在 Provider 中直接调用我的组件，它工作正常。由于我们使用它的方式，每个页面在某种意义上都是它自己的 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.

store 似乎应该传递给任何包裹在里面的东西，但事实并非如此。我觉得我可能遗漏了一些有关 Redux 工作原理的信息。有没有更好的方法来解决这个问题？

Answer 1

在深入了解我的错误后，我意识到我在 JSX 中返回 Provider 并且 BillingPage class 本身没有引用 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)

创建可重用的 Redux 包装器

Creating a reusable Redux Wrapper

javascript

reactjs

react-rails

redux

react-redux