Question

我很困惑为什么这是未定义的。我设置了商店，甚至可以通过Chrome的Redux工具查看它并且显示正确，但是当我尝试发送到商店时，我总是得到一个无法读取的属性＆＃39; dispatch＆＃39 ;未定义的错误。这真让我烦恼，因为我不知道发生了什么。我已经按照许多教程写了一封信，但我仍然坚持使用相同的错误信息。

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中，您要检查的是与电子邮件组件

中分派的操作不同的操作

Redux：无法读取属性＆＃39; dispatch＆＃39;未定义的

1 个答案: