react-redux中connect获取不到store中的state(undefined)
Counter里面可以使用dispatch对store的数据进行增减,但是connect时候报错如下:
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';
2 回复
你这个问题 比较多,这个是中文网Redux 中文文档
@afacode 谢谢,这个已经解决了,是reducer.js没有提供defaultState的返回,所以在后面加上:
default:
return {
count:state.count
}