2

我正在尝试使用react+ redux+ react-redux+react-router理念将我的组件连接到商店。即使父级用商店封装，我也会收到此错误：

[Invariant Violation: Could not find "store" in either the context or props of "Connect(Body)". 

Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Body)".]
 name: 'Invariant Violation', framesToPop: 1 }

代码（为简洁起见缩短了导入）

组件/Table.jsx

export default class Table extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
        {this.props.barcodes.map(barcode =>
          <p key={barcode.value}>
        )}
        </tbody>
      </table>
    );
  }
}

容器/BarcodeListing.jsx

import Table from 'components/Table'
import { connect } from 'react-redux'

function mapStateToProps(state) {
  return { barcodes: state.barcodes };
}

@connect(mapStateToProps)
class Body extends React.Component {
  render() {
    return (
      <Table barcodes={barcodes}/>
      );
  }
}

export default class extends React.Component {
  render() {

    return (
      <Container>
        <Body />
      </Container>
      );
  }
}

路线.jsx

import BarcodeListing from 'containers/barcodeListing';

const reducer = combineReducers(Object.assign({}, reducers, {
  routing: routeReducer
}));

const finalCreateStore = compose(window.devToolsExtension())(createStore);

  const store = finalCreateStore(reducer, {}); 

  return (
    <Provider store={store}>
      <Router history={BrowserHistory} onUpdate={onUpdate}>
        <Route path='/' component={BarcodeListing} />
      </Router>
    </Provider>
  );
};

包.json

"react": "shripadk/react-ssr-temp-fix",
"react-dom": "^0.14.6",
"react-hot-loader": "^1.2.7",
"react-redux": "^4.0.6",
"react-router": "^1.0.0-beta3",
"react-style": "^0.5.5",
"redux": "^3.0.6",
"redux-logger": "^2.3.2",
"redux-simple-router": "^1.0.2",
4

1 回答 1

3

看来您的 React 是0.13.3版本，react有问题<0.14。请参阅 Dan Abramov（redux 作者）的回答：

在 React 0.14 发布之前，Router 1.0 不会以这种方式工作。

顶级路由处理程序 (App) 不是低级处理程序 (DashboardApp) 的所有者，因此上下文不会传播。这将在 React 0.14 中修复。

这意味着你store不会从Provider下到Body...

如果您无法更改 React 的版本，请尝试将 store 作为 prop 传递给Body组件。

就像是：

import { store } from '../routes.jsx';
...
return (
  <Container>
    <Body store={ store } />
  </Container>
);
于 2016-01-25T12:02:59.743 回答