Redux：无法读取未定义的属性“ dispatch”

Question

我很困惑为什么这是不确定的。 我设置了商店，甚至可以通过Chrome的Redux工具查看它，并且它可以正确显示，但是当我尝试将其分发到商店时，总是会出现无法读取的未分配错误属性“ dispatch” 。 这真让我烦恼，因为我不知道发生了什么。 我遵循了无数个教程，一个字母一个字母，但仍然停留在相同的错误消息中。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import manageEmails from './reducers/manageEmails';
import App from './App';
import './index.css';

export function configureStore(){
  return createStore(
    manageEmails,
    window.__REDUX_DEVTOOLS_EXTENSION__ && 
    window.__REDUX_DEVTOOLS_EXTENSION__()
  );
};

ReactDOM.render(
  <App store={configureStore()} />,
  document.getElementById('root')
);

manageEmails.js

export default function manageEmails(state = {
  numberOfEmails: 0,
  emails: [],
}, action) {
  switch(action.type) {
    case "ADD_USER":
      return Object.assign({}, state, {
        emails:state.emails.concat(action.email)
      });

  default:
    return state;
  }
}

App.js

import React, { Component } from 'react';
import './App.css';
import $ from 'jquery';
import Typed from 'typed.js';
import AboutDiv from '../src/components/AboutDiv.js'
import ContactDiv from '../src/components/ContactDiv.js'
import Navigation from '../src/components/Navigation.js'
import Background from '../src/components/Background.js'
import Overlay from '../src/components/Overlay.js'
import Emails from '../src/components/Emails.js'
import { BrowserRouter as Router, Route } from "react-router-dom"


$(document).ready(function() {
    var options = {
        strings: ["dj@khaled.com", "post@malone.com",       
       "drizzy@drake.com"],
        typeSpeed: 175,
        backSpeed: 20,
        fadeOut: true,
        loop: true,
        attr: 'placeholder'
    }

    var typed = new Typed( (".typed"), options);
});

export class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Navigation />
          <Background />
          <Overlay />
          <Emails store={this.props.store}/>
        </div>
      </Router>
    );
  }
}

export default App;

Emails.js

import React, { Component } from 'react';

export default class Emails extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
    };
  }

  handleOnSubmit(event) {
    debugger
    event.preventDefault();
    this.props.store.dispatch({
      type: "ADD_EMAIL",
      email: this.state.email,
    })
  }

 render() {
    return(
      <button onClick={this.handleOnSubmit.bind(this)}>
        Click Me
      </button>
    )
  }
};

Answer 1

检查我从您的代码创建的最小示例，它似乎可以正常工作。 可以在codesandbox找到代码

另外，您在那里有错字。 在reducer中，您要检查的动作与在Email组件中分派的动作不同