Question

我使用React-Redux-Starter-Kit并且对于如何引入共享相同reducer / store的嵌套组件（例如：module）感到困惑。在这种情况下，嵌套组件需要使用与父模块相同的模块（我意识到可以传递引用和函数，但我想直接访问模块）。

我将使用一个非常简单的示例来提出我的问题：<Foo />组件连接到路由/foo/:fooId并且在其视图中<Bar />组件存在（这不是＆＃39 ;有路线）。

这里是对结构的概述（我还没弄明白如何将Bar嵌入Foo ......这将是另一个问题）

routes
├── Foo
│   ├── components
│   │   └── Foo.js
│   ├── containers
│   │   └── FooContainer.js
│   ├── modules
│   │   └── foo.js
│   └── index.js
├── Bar
│   ├── components
│   │   └── Bar.js
│   ├── containers
│   │   └── BarContainer.js
│   └── index.js
└── index.js

这是＆＃39的Bar的index.js：

import { injectReducer } from '../../store/reducers';

export default (store) => ({
  getComponent (nextState, cb) {
    require.ensure([], (require) => {
      const Bar = require('./containers/BarContainer').default
      const reducer = require('../Foo/modules/foo').default
      injectReducer(store, { key: 'foo', reducer })
      cb(null, Bar)
    }, 'bar')
  }
});

这是Bar的容器：

import { connect } from 'react-redux'
import { someCoolFunctionOnFooModule } from '../../Foo/modules/foo'
import Bar from '../components/Bar'

const mapDispatchToProps = {
  someCoolFunctionOnFooModule
}

const mapStateToProps = (state) => ({
  someItemThatBarNeeds: state.foo.someItemThatBarNeeds
})

export default connect(mapStateToProps, mapDispatchToProps)(Bar)

这是Bar的组成部分：

import React from 'react'

class Bar extends React.Component {
  constructor() {
    super()
  }

  componentDidMount() {
    this.props.someCoolFunctionOnFooModule()
  }

  render() {
    return (
      <div>
        <h1>{this.props.someItemThatBarNeeds}</h1>
      </div>
    )
  }
}

export default Bar

...当我import Bar from '../../Bar/components/Bar'或import Bar from '../../Bar'并将<Bar />放入Foo的视图时，它无法正常工作。此外，Bar的index.js中的console.debug('here')并未显示。这使我认为组件和容器没有与Redux正确连接。

我该如何解决这个问题？

谢谢！

用于父子组件的Redux共享模块

0 个答案: