React-redux：找不到“商店”

Question

I'm new to web development, and I'm having difficulty learning react, redux, express, and single-page routing so I apologize if I'm missing an obvious fix.

Here is the error I am getting in the server console: 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)". 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)".

I'm pretty sure that I am wrapping my root component in a <Provider> with a store.

I have seen other people report similar problems.

• In one instance , the user did not connect his component, but I think I'm connecting mine.
• In another case , a workaround was given for React 0.13. However, I am using React 15, and I also tried the workaround and still had no luck.
• I eventually made my way to redux's troubleshooting section . Unfortunately, I am using webpack and can't get its sourcemaps working so I can't confirm that I don't have duplicate react files running. I did do a search for react.js files in my node modules:

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

But if I deleted the react.js in babel-types, the webpack build failed.

---

In my express server file, I'm using react-router's Router.match() to get a single-page application. If I instead use the following, then I don't get any problems with the store, but my app no longer appears to be a single-page app. If I'm wrong about this, then this would seem to be the solution. However, I'm concerned that it GET requests all the static files every time I visit a new url, but I might be confusing my idea of what a SPA really is.

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

---

Here is a dump of my code:

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>
);

components/App.js

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

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

export default App

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

components/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"
}

---

I'm sorry if I'm missing something obvious and that this is such a long post, but I hope that it's useful in getting all the necessary information across. If you need anything else to help me, please let me know.

Answer 1

TLDR: In your express server.js use for your routing:

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

If your app is no longer acting as a SPA and you want it to, fix your component declarations to look like class MyComponent extends React.Component {...}

---

I think I found a solution. I have to admit I don't know why exactly it works, but it does.

First of all, I was originally routing my app incorrectly in server.js like so:

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')
        }
    });
});

The method I was using was based off a tutorial that used alt.js instead of redux. I don't necessarily understand why redux requires you to route like so:

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

But doing this does get rid of the original error. However, when I tried using this method, I realized my application was no longer a Single-Page Application because it was sending GET requests for every new url. I discovered the solution by stripping my app down to simple divs without redux code. I eventually discovered that my problem was in Navbar.js (above in question). For whatever reason, when I changed the declaration from

const Navbar ({ajaxAnimationClass}) => {...}

to

class Navbar extends React.Component {...}

my app was no longer sending GET requests on every new page load.