React + Redux:不变违规:在“Connect(Body）”的上下文或道具中都找不到“store”

React + Redux : Invariant Violation: Could not find "store" in either the context or props of "Connect(Body)"

本文关键字：上下文 store 找不到 Redux React Connect Body      更新时间：2023-09-26

我正在尝试使用 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 }

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

组件/表.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>
    );
  }
}

containers/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>
      );
  }
}

routes.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",

看来你的 React 是0.13.3版本，反应<0.14存在问题。参见Dan Abramov（redux作者）的回答：

在 Router 1.0 上它不会以这种方式工作，直到 React 0.14 出来。

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

这意味着您的store不会从Provider传给Body......

如果你不能改变 React 的版本，试着将 store 作为道具传递给Body组件。

像这样：

import { store } from '../routes.jsx';
...
return (
  <Container>
    <Body store={ store } />
  </Container>
);
相关文章：