React-redux：找不到“商店”

【问题标题】：React-redux: Could not find "store"React-redux：找不到“商店”
【发布时间】：2017-06-23 23:52:07
【问题描述】：

我是 Web 开发新手，在学习 react、redux、express 和单页路由时遇到困难，所以如果我遗漏了一个明显的修复方法，我深表歉意。

这是我在服务器控制台中遇到的错误：Invariant Violation: Could not find "store" in either the context or props of "Connect(Navbar)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Navbar)".

我很确定我将根组件包装在带有商店的<Provider> 中。

我看到其他人报告了类似的问题。

  • 在one instance，用户没有连接他的组件，但是我 认为我正在连接我的。
  • 在another case 中，为 React 0.13 提供了一种解决方法。然而， 我正在使用 React 15，我也尝试了解决方法，但仍然没有 运气。
  • 我最终找到了redux's troubleshooting section。 不幸的是，我正在使用 webpack 并且无法获取它的源图 工作，所以我无法确认我没有重复的反应文件 跑步。我确实在我的节点模块中搜索了 react.js 文件：

find . -name 'react.js' ./node_modules/babel-types/lib/react.js ./node_modules/react/dist/react.js ./node_modules/react/react.js

但是如果我删除了 babel-types 中的 react.js，webpack 构建 失败了。

在我的快速服务器文件中，我使用 react-router 的 Router.match() 来获取单页应用程序。如果我改为使用以下内容，那么我不会在商店中遇到任何问题，但我的应用程序似乎不再是单页应用程序。如果我对此有误，那么这似乎是解决方案。但是，我担心每次访问新网址时它都会请求所有静态文件，但我可能会混淆我对 SPA 到底是什么的想法。 

app.get('/*', (req,res) => {
    res.sendFile(path.join(__dirname, 'views/index.html'))
})

这是我的代码转储：

server.js

// Babel ES6/JSX Compiler
require('babel-register');

var _ = require('underscore');
var https = require('https');
var fs = require('fs');
var async = require('async');
var swig  = require('swig');
var React = require('react');
var ReactDOM = require('react-dom/server');
var Router = require('react-router');
var routes = require('./app/routes');
var express = require('express');
var path = require('path');
var logger = require('morgan');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');

var Trip = require('./models/trip');
var config = require('./config');

mongoose.connect(config.database);
mongoose.connection.on('error', function() {
  console.info('Error: Could not connect to MongoDB. Did you forget to run `mongod`?');
});

var options = {
    key: fs.readFileSync('key.pem'),
    cert: fs.readFileSync('cert.pem')
};

var app = express();

app.set('port', process.env.PORT || 3000);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));


/** 
 * POST /api/trips
 * Adds new trip to database.
 */
app.post('/api/trips', function(req, res, next) {
    var destination = req.body.destination;
    var startDate = req.body.startDate;
    var endDate = req.body.endDate;
    var comment = req.body.comment;

    var trip = new Trip({
        destination: destination,
        startDate: startDate,
        endDate: endDate,
        comment: comment
    });

    trip.save(function(err) {
        if(err) {
            return next(err);
        }
        res.send({message: "Trip to " + destination + " has been added successfully!"});
    });

});

/**
 * GET /api/trips
 * Returns all trips
 */
app.get('/api/trips', function(req, res, next) {
    Trip.find()
        .exec(function(err, trips) {
            if (err) {
                return next(err);
            }

            return res.send(trips);
        })
});

/**
 * PUT /api/trips/:id
 * Updates trip given by id
 */
app.put('/api/trips/:id', function(req, res, next) {
    // TODO
});

/**
 * GET /api/trips/:id
 * Returns trip given by id
 */
app.get('/api/trips/:id', function(req, res, next) {
    // TODO
});

/**
 * DELETE /api/trips/:id
 * Deletes trip given by id
 */
app.delete('/api/trips/:id', function(req, res, next) {
    // TODO
});



app.use(function(req, res) {
    Router.match({routes: (routes.default)(), location: req.url}, function(err, redirectLocation, renderProps) {
        if (err) {
          res.status(500).send(err.message)
        } else if (redirectLocation) {
          res.status(302).redirect(redirectLocation.pathname + redirectLocation.search)
        } else if (renderProps) {
          var html = ReactDOM.renderToString(React.createElement(Router.RouterContext, renderProps));
          var page = swig.renderFile('views/index.html', { html: html });
          res.status(200).send(page);
        } else {
          res.status(404).send('Page Not Found')
        }
    });
});

var server = https.createServer(options, app);

server.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

views/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>Trip Planner</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900"/>
  <link rel="stylesheet" href="/css/main.css"/>
  <link rel="stylesheet" href="/css/_datepicker.css"/>
</head>
<body>
<div id="app"></div>
<script src="/js/vendor.js"></script>
<script src="/js/vendor.bundle.js"></script>
<script src="/js/bundle.js"></script>
</body>
</html>

main.js

import React from 'react';
import {Router, browserHistory} from 'react-router';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import routes from './routes';
import tripPlanner from './reducers/tripPlanner';

let store = createStore(tripPlanner);

ReactDOM.render(
    <Provider store={store}>
        <Router history={browserHistory}>
            {routes}
        </Router>
    </Provider>,
    document.getElementById('app'));

reducers/tripPlanner.js

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import navbar from './navbar';
import trips from './trips';

const tripPlanner = combineReducers({
    trips,
    navbar,
    form: formReducer
});

export default tripPlanner;

routes.js

import React from 'react';
import {Route} from 'react-router';
import App from './components/App';
import Home from './components/Home';
import AddTrip from './components/AddTrip';

export default (
    <Route component={App}>
        <Route path='/' component={Home} />
        <Route path='/add' component={AddTrip} />
    </Route>
);

组件/App.js

import React from 'react'
import NavbarContainer from '../containers/NavbarContainer'

const App = (props) => (
  <div>
    <NavbarContainer />
    {props.children}
  </div>
)

export default App

容器/NavbarContainer.js

import { connect } from 'react-redux';
import Navbar from '../components/Navbar';

const mapStateToProps = (state) => {
    return {
        ajaxAnimationClass: state.ajaxAnimationClass
    }
}

const mapDispatchToProps = (dispatch) => {
    return {

    }
}

const NavbarContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(Navbar);

export default NavbarContainer;

组件/Navbar.js

import React, { PropTypes } from 'react';
import { Link } from 'react-router';

const Navbar = ({ ajaxAnimationClass }) => (
  <nav className='navbar navbar-default navbar-static-top'>
    <div className='navbar-header'>
      <button type='button' className='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar'>
        <span className='sr-only'>Toggle navigation</span>
        <span className='icon-bar'></span>
        <span className='icon-bar'></span>
        <span className='icon-bar'></span>
      </button>
      <Link to='/' className='navbar-brand'>
        <span ref='triangles' className={'triangles animated ' + ajaxAnimationClass}>
          <div className='tri invert'></div>
          <div className='tri invert'></div>
          <div className='tri'></div>
          <div className='tri invert'></div>
          <div className='tri invert'></div>
          <div className='tri'></div>
          <div className='tri invert'></div>
          <div className='tri'></div>
          <div className='tri invert'></div>
        </span>
        Trips
      </Link>
    </div>
    <div id='navbar' className='navbar-collapse collapse'>
      <ul className='nav navbar-nav'>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/add'>Add</Link></li>
      </ul>
    </div>
  </nav>
);

export default Navbar;

package.json

{
  "name": "trip-planner",
  "description": "Trip planner",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "watch": "nodemon server.js"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  },
  "dependencies": {
    "async": "^1.5.0",
    "babel-loader": "^6.2.10",
    "babel-preset-react": "^6.22.0",
    "body-parser": "^1.14.1",
    "colors": "^1.1.2",
    "compression": "^1.6.0",
    "css-loader": "^0.26.1",
    "express": "^4.13.3",
    "history": "^1.13.0",
    "moment": "^2.17.1",
    "mongoose": "^4.2.5",
    "morgan": "^1.6.1",
    "react": "^15.4.2",
    "react-addons-shallow-compare": "^15.4.2",
    "react-datepicker": "^0.40.0",
    "react-dates": "^5.2.0",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "react-router": "^2.8.1",
    "redux": "^3.6.0",
    "redux-form": "^6.5.0",
    "request": "^2.65.0",
    "serve-favicon": "^2.3.0",
    "socket.io": "^1.3.7",
    "style-loader": "^0.13.1",
    "swig": "^1.4.2",
    "underscore": "^1.8.3",
    "webpack": "^1.14.0",
    "xml2js": "^0.4.15"
  },
  "devDependencies": {
    "babel-core": "^6.1.19",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "babel-register": "^6.3.13",
    "babelify": "^7.2.0",
    "bower": "^1.6.5",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.6.0"
  },
  "license": "MIT"
}

很抱歉，如果我遗漏了一些明显的东西并且这篇文章很长，但我希望它对获取所有必要的信息很有用。如果您需要任何其他帮助我，请告诉我。

【问题讨论】：

  • 您可以尝试为路由器组件执行此操作吗？
  • 我想知道你的错误在哪里弹出？你提到了服务器，但 React 只是前端，它应该出现在浏览器控制台中，而不是服务器端控制台中。您是否确保运行 webpack 将所有内容（再次）捆绑到 bundle.js 或其他东西中？此外，如果您将 ReactDOM 注入中的 Provider 替换为仅带有消息的简单 div，并且没有出现问题并且您获得带有消息的页面，那么捆绑并将静态资产发送到客户端就没有问题。
  • 您好 nbkhope，感谢您的帮助。我尝试了您的第一条评论并得到了相同的结果。对于您的第二条评论，错误消息出现在我的终端和浏览器的内容中，但没有出现在空白的浏览器控制台中。我尝试用
    替换我的 标签，也得到了同样的错误。我确信我正在与 webpack 捆绑。
  • 您是否尝试将您的 SPA 放在 public/ 目录中，而不是通过显式控制器响应发送它？
  • 感谢 nbkhope 的帮助，我最终尝试将 替换为
    并删除了所有因此更改而中断的代码。然后我继续添加代码，直到我重新发现错误并找到罪魁祸首

标签： javascript reactjs express redux react-router


【解决方案1】：

TLDR：在您的 express server.js 中用于路由：

app.get('/*', (req,res) => {
    res.sendFile(path.join(__dirname, 'views/index.html'))
})

如果您的应用不再充当 SPA 并且您希望它这样做，请将您的组件声明修复为类似于 class MyComponent extends React.Component {...}

我想我找到了解决办法。我不得不承认我不知道它为什么会起作用，但确实如此。

首先，我最初在 server.js 中错误地路由了我的应用程序，如下所示：

app.use(function(req, res) {
    Router.match({routes: (routes.default)(), location: req.url}, function(err, redirectLocation, renderProps) {
        if (err) {
          res.status(500).send(err.message)
        } else if (redirectLocation) {
          res.status(302).redirect(redirectLocation.pathname + redirectLocation.search)
        } else if (renderProps) {
          var html = ReactDOM.renderToString(React.createElement(Router.RouterContext, renderProps));
          var page = swig.renderFile('views/index.html', { html: html });
          res.status(200).send(page);
        } else {
          res.status(404).send('Page Not Found')
        }
    });
});

我使用的方法基于 tutorial，它使用 alt.js 而不是 redux。我不一定明白为什么 redux 要求你这样路由：

app.get('/*', (req,res) => {
    res.sendFile(path.join(__dirname, 'views/index.html'))
})

但是这样做确实消除了原来的错误。但是，当我尝试使用此方法时，我意识到我的应用程序不再是单页应用程序，因为它正在为每个新 url 发送 GET 请求。我通过将我的应用程序剥离为没有 redux 代码的简单 div 来发现解决方案。我最终发现我的问题出在 Navbar.js（上面有问题）。无论出于何种原因，当我从

更改声明时 
const Navbar ({ajaxAnimationClass}) => {...}

到

class Navbar extends React.Component {...}

我的应用不再在每次新页面加载时都发送 GET 请求。

【讨论】：

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode