react-redux中connect获取不到store中的state(undefined) - CNode技术社区

Counter里面可以使用dispatch对store的数据进行增减,但是connect时候报错如下:

微信截图_20190528175815.png

Counter使用store页

import React,{Component} from 'react';
import { connect } from "react-redux";
import {INCREMENT,DECREMENT} from '../../redux/actions';
class Counter extends Component{
 increment = ()=>{
 this.props.dispatch({
 type:INCREMENT
 })
 }
 decrement = ()=>{
 this.props.dispatch({
 type:DECREMENT
 })
 }
 render(){
 return (
 <div>
 <h2>Counter</h2>
 <div>
 <button onClick={this.decrement}>-</button>
 <span>{this.props.count}</span>
 <button onClick={this.increment}>+</button>
 </div>
 </div>
 )
 }
}
const mapStateToProps = (state) => {
 console.log(state);
 return ({
 count: state.count
 });
}
export default connect(mapStateToProps)(Counter);

App.js入口文件

import React,{Component} from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
// import createBrowserHistory from 'history/createBrowserHistory';
import {Provider} from 'react-redux';
import {store} from './redux/index.js';
import Home from './views/Home';
import Topics from './views/Topics';
import About from './views/About';
import Counter from './views/Counter'
import './App.css';
class App extends Component{
 render(){
 // const customHistory = createBrowserHistory();
 return (
 <Provider store={store}>
 <Router>
 <div>
 <nav>
 <ul>
 <li><Link to="/">Home</Link></li>
 <li><Link to="/about">About</Link></li>
 <li><Link to="/topics">Topics</Link></li>
 </ul>
 </nav>
 <Counter/>
 <Route exact path="/" component={Home}/>
 <Route path="/about" component={About}/>
 <Route path="/topics" component={Topics}/>
 </div>
 </Router>
 </Provider>
 )
 }
}
export default App;

redux/index.js

import {createStore} from 'redux';
import reducer from './reducer';
export const store = createStore(reducer);

redux/reducer.js

const initialState = {
 count: 0
};
function reducer(state = initialState, action) {
 switch (action.type) {
 case 'INCREMENT':
 return {
 count: state.count + 1
 };
 case 'DECREMENT':
 return {
 count: state.count - 1
 };
 case 'RESET':
 return {
 count: 0
 }
 }
}
export default reducer;

redux/actions.js

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';

你这个问题 比较多,这个是中文网Redux 中文文档

@afacode 谢谢,这个已经解决了,是reducer.js没有提供defaultState的返回,所以在后面加上:

default:
	return {
		count:state.count
	}