我很困惑为什么这是未定义的。我设置了商店,甚至可以通过Chrome的Redux工具查看它并且显示正确,但是当我尝试发送到商店时,我总是得到一个无法读取的属性' 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>
)
}
};
答案 0 :(得分:0)
检查我从代码中创建的最小示例,它似乎按预期工作。代码可以在codesandbox
找到另外,你有一个错字。在reducer中,您要检查的是与电子邮件组件
中分派的操作不同的操作